在 React 中，状态是决定组件如何渲染的重要因素。通过 React 的 useState 和 useReducer 钩子，我们能够轻松管理组件的状态
2.1. 使用 useState 管理状态
useState 是 React 中最基础的状态管理钩子。它允许我们在函数组件中添加状态。以下是一个基本示例：
。本篇博客将帮助你深入理解这两种常用的状态管理方式。
import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}export default Counter;
在这个例子中，count 是当前的状态值，setCount 是用来更新状态的函数。
2.2. 使用 useReducer 管理复杂状态
当组件的状态变得复杂时，useState 可能不再足够。在这种情况下，useReducer 是一种更适合的选择。它类似于 Redux 中的 reducer 函数，可以帮助我们管理复杂的状态逻辑
import React, { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:return state;}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
}export default Counter;
2.3. 总结
useState是最常用的状态管理钩子，适用于简单的状态管理。useReducer更适合复杂的状态管理，尤其是当状态逻辑需要根据多个不同的 action 更新时。
通过掌握这两种钩子，你将能更高效地管理 React 组件的状态。