当前位置：首页 > news >正文

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

news 2025/9/9 11:08:37

文章目录

- - 如何在 React 中管理状态？
  - - 1. 函数组件中使用 `useState` 钩子（推荐）
    - 2. 类组件中使用 `this.state`（传统方式）
    - 3. 复杂状态管理（多组件共享状态）
  - 状态管理的核心原则

在 React 中， 状态（State） 是组件内部管理的可变数据，当状态发生变化时，组件会重新渲染以反映这些变化。状态是组件的“记忆”，用于存储需要随用户交互或其他因素动态变化的数据（如表单输入值、计数器数值、加载状态等）。

与 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>);
}