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

React 基础状态管理方案

news 来源：原创 2025/6/19 1:13:44

1. useState

useState 是 React 提供的最基本的 Hook，用于在函数组件中添加状态管理。它返回一个状态变量和一个更新状态的函数。

1.1. 使用场景

适合管理简单的状态。

适合管理组件内部的局部状态。

1.2. 示例代码

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button><button onClick={() => setCount(count - 1)}>Decrement</button></div>)
}

2. useReducer

useReducer 是 useState 的替代方案，适合用于管理更复杂的状态逻辑。它通过 reducer 函数来管理状态，类似于 Redux。

如果我们组件内部状态足够多，那么状态会逐渐趋于复杂，这时，我们需要更好的编程范式来解决状态存储与更新。如果之前使用过 Redux，React 单向数据流告诉了我们，状态的管理需要注意以下几点：

1. 使用一个对象存储变量（state）；

2. 订阅模式实现对于该对象的变更响应处理（reducer）；

3. 定义更改对象变更的动作（action）；

4. 订阅该对象的变更，完成状态到视图的映射（ui = fx(state))；

用一句话来概括：状态由 useReducer 借助 reducer 生效，状态的变更由 dispatch 发起，最终状态变更驱动视图更新。

2.1. 使用场景

适合管理复杂的状态逻辑。

状态更新依赖于先前状态。

2.2. 示例代码

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {switch (action.type) {case 'INCREMENT':return {