React Native - 状态 (State)

React Native - State

在 React Native 中，组件的数据由 state（状态）和 props（属性）管理。本章重点介绍 state，它允许组件存储和管理随时间变化的数据，从而触发 UI（用户界面）的重新渲染（re-render）。

理解 State 和 Props

State 是组件自己拥有并可以在内部修改的数据。当 state 改变时，组件会重新渲染。Props（即 properties 的缩写）是父组件传递给子组件的只读数据。组件不能直接改变自己的 props。

可以将 state 视为组件的私有数据存储，而 props 则像从外部传递进来的配置参数。

使用 Hook 管理 State

现代 React Native 开发大量使用函数组件（functional components）和 Hook（钩子）。useState Hook 是向函数组件添加 state 的主要方式。

让我们创建一个简单的组件，用于显示来自其 state 的文本。

MyStateComponent.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

const MyStateComponent = () => {
  // Declare a state variable named 'message' and a function 'setMessage' to update it.
  // 'useState' takes the initial state as an argument.
  // 声明一个名为 'message' 的 state 变量，以及一个名为 'setMessage' 用于更新它的函数。
  // 'useState' 接受初始状态作为参数。
  const [message, setMessage] = useState(
    'This is an initial message from state. Tap the button to change it!'
  );

  const updateMessage = () => {
    setMessage('The message has been updated!');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{message}</Text>
      <Button title="Update Message" onPress={updateMessage} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: 'center',
  },
});

export default MyStateComponent;

在此示例中：

我们从 ‘react’ 导入了 useState。
useState('Initial message') 初始化 message 为 ‘Initial message’，并提供了 setMessage 函数来更新它。
Text 组件显示了 message 的当前值。
Button 组件被按下时，会调用 updateMessage 函数，后者再调用 setMessage 来更新 state，从而导致组件重新渲染并显示新的消息。

运行此组件时，您将看到初始消息。点击 ‘Update Message’ 按钮将改变屏幕上显示的文本。

`useState` 的核心概念

初始化: useState 接受 state 变量的初始值作为其参数。这可以是字符串、数字、布尔值、数组、对象，甚至 null。
返回值: 它返回一个包含两个元素的数组：当前的 state 值和用于更新该 state 值的函数（通常称为 setter 函数）。
更新 State: 始终使用 setter 函数（例如 setMessage）来更新 state。直接修改 state 变量（例如 message = 'new value'）不会触发重新渲染，这是不正确的做法。
异步更新: 使用 setter 函数进行的 state 更新可能是异步的。出于性能原因，React 可能会批量处理多个 state 更新。如果您需要使用先前的 state 来计算新的 state，请使用函数式更新形式：setMessage(prevMessage => prevMessage + ' updated');

对于更复杂的 state 逻辑，您可以探索 useReducer Hook。当管理具有多个子值或下一个 state 依赖于上一个 state 的方式更复杂时，通常更推荐使用 useReducer。您可以在官方 React 文档中了解更多信息：https://react.dev/reference/react/useState

React Native - 状态 (State)

React Native - State

理解 State 和 Props

使用 Hook 管理 State

useState 的核心概念

`useState` 的核心概念