什么是状态（State）以及如何在React中管理状态？

与 Props 不同（Props 是从父组件传入的只读数据），状态是组件私有的，只能在组件内部修改。

如何在 React 中管理状态？

根据组件类型和状态复杂度，React 提供了多种状态管理方式：

1. 函数组件中使用 useState 钩子（推荐）

React 16.8 引入的 Hooks 让函数组件可以直接管理状态，useState 是最基础的状态管理钩子。

基本用法：

import { useState } from 'react';

function Counter() {
  // 声明一个状态变量 count，初始值为 0
  // setCount 是更新 count 的函数（状态更新器）
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      {/* 点击按钮时更新状态 */}
      <button onClick={() => setCount(count + 1)}>
        点击增加
      </button>
    </div>
  );
}

特点：

• useState(initialValue) 接收初始值，返回 [状态变量, 状态更新器] 数组
• 状态更新是异步的，多次更新会被合并（如需基于前一次状态计算，应使用函数形式：setCount(prev => prev + 1)）
• 每次状态更新会触发组件重新渲染

2. 类组件中使用 this.state（传统方式）

在类组件中，状态通过 this.state 定义，通过 this.setState() 方法更新。

基本用法：

import React from 'react';

class Counter extends React.Component {
  // 初始化状态
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <p>你点击了 {this.state.count} 次</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点击增加
        </button>
      </div>
    );
  }
}

特点：

• 状态必须是对象形式（this.state = { ... }）
• 更新状态必须使用 this.setState()（直接修改 this.state 不会触发重新渲染）
• setState 是异步的，如需基于前一次状态更新，可传入函数：this.setState(prev => ({ count: prev.count + 1 }))

3. 复杂状态管理（多组件共享状态）

当状态需要在多个组件间共享（如用户登录状态、购物车数据），或状态逻辑复杂时，需要更高级的方案：

• Context + useReducer：适合中等复杂度的状态共享

  • useReducer 用于管理复杂状态逻辑（类似 Redux 的简化版）
  • Context 用于跨组件传递状态，避免“props drilling”（ props 层层传递）

  // 定义 reducer
  function todoReducer(state, action) {
    switch (action.type) {
      case 'ADD_TODO':
        return [...state, action.payload];
      default:
        return state;
    }
  }
  
  // 在组件中使用
  function TodoList() {
    const [todos, dispatch] = useReducer(todoReducer, []);
    
    const addTodo = (text) => {
      dispatch({ type: 'ADD_TODO', payload: text });
    };
    
    return (
      <div>
        <button onClick={() => addTodo('新任务')}>添加</button>
        {todos.map((todo, index) => (
          <p key={index}>{todo}</p>
        ))}
      </div>
    );
  }
  

• 状态管理库：适合大型应用
  如 Redux、Redux Toolkit、Zustand、Jotai 等，提供更完善的状态管理能力（中间件、持久化、调试工具等）。

状态管理的核心原则

1. 单一数据源：尽量让状态集中管理，避免分散在多个组件中
2. 状态只读：状态更新应通过不可变方式（如 setState、dispatch），而非直接修改
3. 最小状态原则：只存储必要的状态，可通过计算得到的数据无需存入状态（如通过 props 和现有状态推导的值）

根据应用规模选择合适的状态管理方式，小型应用用 useState 即可，大型应用则需要引入专门的状态管理库。