跳到主要内容

React 基础

React Native 基于 React 运行，React 是一个用于使用 JavaScript 构建用户界面的流行开源库。要充分利用 React Native，理解 React 本身会有所帮助。本节可以帮助你入门，也可以作为复习课程。

我们将涵盖 React 背后的核心概念

  • 组件 (components)
  • JSX
  • props (属性)
  • state (状态)

如果你想深入了解，我们鼓励你查看 React 官方文档。

你的第一个组件​

本 React 入门教程的其余部分将以猫咪作为示例：友好、易近的生物，它们需要名字和一家咖啡馆来工作。这是你的第一个 Cat 组件

方法如下：要定义你的 Cat 组件，首先使用 JavaScript 的 import 来导入 React 和 React Native 的 Text 核心组件

tsx
import React from 'react';
import {Text} from 'react-native';

你的组件以函数形式开始

tsx
const Cat = () => {};

你可以将组件视为蓝图。函数组件返回的任何内容都会被渲染成一个 React 元素。 React 元素可以让你描述你想在屏幕上看到的内容。

在这里，Cat 组件将渲染一个 <Text> 元素

tsx
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

你可以使用 JavaScript 的 export default 来导出你的函数组件，以便在你的应用程序中像这样使用

tsx
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;
提示

这是导出组件的多种方法之一。这种导出方式与 Snack Player 配合良好。但是，根据你的应用程序的文件结构，你可能需要使用不同的约定。这份 有用的 JavaScript 导入和导出备忘单 可以提供帮助。

现在仔细看看那个 return 语句。<Text>Hello, I am your cat!</Text> 正在使用一种让编写元素方便的 JavaScript 语法：JSX。

JSX​

React 和 React Native 使用 JSX， 这种语法允许你在 JavaScript 中像这样编写元素：<Text>Hello, I am your cat!</Text>。React 文档中有一个 关于 JSX 的全面指南，你可以参考以了解更多。因为 JSX 是 JavaScript，所以你可以在其中使用变量。在这里，你正在声明一只猫的名字 name，并用花括号将其嵌入 <Text> 中。

任何 JavaScript 表达式都可以在花括号之间工作，包括函数调用，如 {getFullName("Rum", "Tum", "Tugger")}

你可以将花括号视为在你的 JSX 中创建了一个通往 JS 功能的入口！

提示

由于 JSX 包含在 React 库中，如果你不在文件顶部包含 import React from 'react'，它将无法工作！

自定义组件​

你已经见过 React Native 的核心组件。React 允许你将这些组件嵌套在一起以创建新组件。这些可嵌套、可重用的组件是 React 范式的核心。

例如，你可以在下面的 <View> 中嵌套 Text 和 TextInput，React Native 会将它们一起渲染

开发者注意事项​

信息

如果你熟悉 Web 开发，<View> 和 <Text> 可能会让你想起 HTML！你可以将它们视为应用程序开发的 <div> 和 <p> 标签。

通过使用 <Cat>，你可以多次在多个地方渲染此组件，而无需重复代码

任何渲染其他组件的组件都是一个父组件。 在这里，Cafe 是父组件，而每个 Cat 都是一个子组件。

你可以在咖啡馆里放任意多的猫。每个 <Cat> 都会渲染一个独特的元素——你可以用 props 来自定义它。

属性​

Props 是 “properties” 的缩写。Props 允许你自定义 React 组件。例如，在这里，你为每个 <Cat> 传递一个不同的 name 供 Cat 渲染

React Native 的大多数核心组件也可以通过 props 进行自定义。例如，在使用 Image 时，你会向它传递一个名为 source 的 prop 来定义它显示的图像

Image 有 许多不同的 props，包括 style，它接受一个包含设计和布局相关属性值对的 JS 对象。

注意

请注意 style 的宽度和高度周围的双花括号 {{ }}。在 JSX 中，JavaScript 值通过 {} 引用。如果你传递的不是字符串而是其他类型的值（如数组或数字）作为 props，例如 <Cat food={["fish", "kibble"]} age={2} />，这会非常方便。但是，JS 对象也用花括号表示：{width: 200, height: 200}。因此，要在 JSX 中传递 JS 对象，你必须用另一对花括号将该对象括起来：{{width: 200, height: 200}}

你可以用 props 和核心组件 Text、Image 和 View 构建许多东西！但要构建一些具有交互性的东西，你需要状态。

状态​

虽然你可以将 props 视为用于配置组件如何渲染的参数，但状态就像是组件的个人数据存储。状态对于处理随时间变化或来自用户交互的数据非常有用。状态赋予你的组件记忆！

信息

一般来说，在组件渲染时使用 props 来配置它。使用 state 来跟踪你期望随时间变化的任何组件数据。

接下来的例子发生在一个猫咪咖啡馆，两只饥饿的猫咪正等着被喂食。它们的饥饿程度，我们期望它会随时间变化（不像它们的名字），被存储为状态。要喂食猫咪，请点击它们的按钮——这将更新它们的状态。

你可以通过调用 React 的 useState Hook 来为组件添加状态。Hook 是一种函数，可以让你“钩入” React 的功能。例如，useState 是一个 Hook，可以让你为函数组件添加状态。你可以在 React 文档中了解其他类型的 Hooks。

首先，你需要像这样从 React 导入 useState

tsx
import React, {useState} from 'react';

然后，在你函数组件内部调用 useState 来声明组件的状态。在这个例子中，useState 创建了一个 isHungry 状态变量

tsx
const Cat = (props: CatProps) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};
提示

你可以使用 useState 来跟踪任何类型的数据：字符串、数字、布尔值、数组、对象。例如，你可以用 const [timesPetted, setTimesPetted] = useState(0) 来跟踪猫咪被抚摸的次数！

调用 useState 会做两件事

  • 它创建一个具有初始值的“状态变量”——在这种情况下，状态变量是 isHungry，其初始值为 true
  • 它创建一个用于设置该状态变量值的函数——setIsHungry

使用什么名称并不重要。但将这种模式视为 [<getter>, <setter>] = useState(<initialValue>) 会很有帮助。

接下来，你添加 Button 核心组件并给它一个 onPress prop

tsx
<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>

现在，当有人按下按钮时，onPress 将会触发，调用 setIsHungry(false)。这会将状态变量 isHungry 设置为 false。当 isHungry 为 false 时，Button 的 disabled prop 会被设置为 true，它的 title 也会改变

tsx
<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Give me some food, please!' : 'Thank you!'}
/>
信息

你可能已经注意到，虽然 isHungry 是一个 const，但它似乎可以被重新赋值！这里的 const 关键字并不意味着状态本身是不可变的。相反，它意味着引用该对象（包含状态和更新它的函数）的引用不会改变。发生的情况是，当调用像 setIsHungry 这样的状态设置函数时，它的组件会重新渲染。在这种情况下，Cat 函数会再次运行——这次，useState 会给我们 isHungry 的下一个值。

最后，将你的猫咪放入一个 Cafe 组件中

tsx
const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};
信息

看到上面的 <> 和 </> 了吗？这些 JSX 部分是 片段 (fragments)。相邻的 JSX 元素必须被包裹在一个封闭的标签中。片段允许你这样做，而无需嵌套一个额外的、不必要的包装元素，如 View。

现在你已经学习了 React 和 React Native 的核心组件，让我们通过查看 处理 <TextInput> 来深入了解其中一些核心组件。