跳至主要内容

React 基础

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

我们将介绍 React 背后的核心概念

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

如果您想深入了解，我们建议您查看 React 的官方文档。

您的第一个组件​

本 React 简介的其余部分在示例中使用猫咪：友好、平易近人的生物，需要名字和一家咖啡馆来工作。这是您的第一个 Cat 组件

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

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

您的组件以函数的形式开始

const Cat = () => {};

您可以将组件视为蓝图。函数组件返回的内容将呈现为一个 **React 元素**。React 元素允许您描述您希望在屏幕上看到的内容。

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

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

您可以使用 JavaScript 的 export default 导出您的函数组件，以便在整个应用程序中使用，如下所示

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)** 是“属性”的简称。属性允许您自定义 React 组件。例如，这里您为每个 <Cat> 传递了一个不同的 name 以供 Cat 渲染

大多数 React Native 的核心组件也可以使用属性进行自定义。例如，当使用 Image 时，您会向其传递一个名为 source 的属性来定义它显示的图像

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

请注意围绕 style 的宽度和高度的双花括号 {{ }}。在 JSX 中，JavaScript 值使用 {} 进行引用。如果您传递的是字符串以外的内容作为属性，例如数组或数字，这将非常方便：<Cat food={["fish", "kibble"]} age={2} />。但是，JS 对象也用花括号表示：{width: 200, height: 200}。因此，要在 JSX 中传递 JS 对象，您必须将该对象包装在 **另一对** 花括号中：{{width: 200, height: 200}}

您可以使用属性和核心组件 Text、Image 和 View 构建许多东西！但是要构建交互式内容，您需要状态。

状态 (State)​

虽然您可以将属性视为用于配置组件渲染方式的参数，但 **状态 (State)** 就像组件的个人数据存储。状态对于处理随时间变化或来自用户交互的数据很有用。状态为您的组件提供了内存！

一般来说，在组件渲染时使用属性进行配置。使用状态跟踪您期望随时间变化的任何组件数据。

以下示例发生在一间猫咪咖啡馆，那里有两只有饥饿感的猫咪在等待喂食。它们的饥饿感（我们期望它会随着时间变化，不像它们的名字）作为状态存储。要喂食猫咪，请按它们的按钮，这将更新它们的状态。

您可以通过调用 React 的 useState Hook 向组件添加状态。Hook 是一种函数，允许您“钩住”React 功能。例如，useState 是一个 Hook，允许您向函数组件添加状态。您可以在 React 文档中了解有关其他类型的 Hook 的更多信息。

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

import React, {useState} from 'react';

然后，您通过在函数内部调用 useState 来声明组件的状态。在此示例中，useState 创建了一个 isHungry 状态变量

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 属性

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

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

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

您可能已经注意到，尽管 isHungry 是一个 const，但它似乎可以重新赋值！发生的情况是，当调用像 setIsHungry 这样的状态设置函数时，其组件将重新渲染。在本例中，Cat 函数将再次运行，并且这次 useState 将为我们提供 isHungry 的下一个值。

最后，将您的猫咪放在 Cafe 组件中

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

看到上面的 <> 和 </> 了吗？这些 JSX 片段是 片段。相邻的 JSX 元素必须包装在封闭标签中。片段允许您在不嵌套额外的、不必要的包装元素（如 View）的情况下做到这一点。

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