4.useReducer 相比useState优势体现在哪？

用户8691

2025年9月18日修改

useReducer vs. useState：在复杂场景中寻求更优的状态管理之道

在 React 开发中，useState 是我们管理组件状态最常用的工具之一。它简单、直观，对于处理单个、独立的状态值（如开关状态、输入框内容）非常高效。​

但随着应用逻辑变得复杂，我们可能会遇到一些挑战：

•
一个组件内有多个 useState，它们之间相互关联，更新逻辑散落在各处。​

•
下一个状态的值严重依赖于前一个状态，逻辑变得难以追踪。​

•
需要将状态更新的逻辑传递给深层子组件，导致了不必要的函数重建和渲染。​
​

在这些场景下，useReducer 提供了一种更结构化、更可预测的状态管理模式。它并非 useState 的替代品，而是在特定复杂度下更优的解决方案。​

从一个实例看差异

我们来看一个常见的计数器场景。如果只是简单的加一，useState 绰绰有余。​

代码块

const [count, setCount] = useState(0);​
​
// 在组件中直接调用​
<button onClick={() => setCount(count + 1)}>Increment</button>​

现在，我们为这个计数器增加一些复杂度：

1.
点击增加/减少按钮，步长为 1。​

2.
可以从输入框设置一个自定义步长。​

3.
有一个重置按钮，将计数器恢复到初始值 0。​

4.
计数值不能小于 0。​
​

使用 useState，我们可能需要这样实现：

代码块

const [count, setCount] = useState(0);​
const [step, setStep] = useState(1);​
​
const handleIncrement = () => {​
  setCount(c => c + step);​
};​
​
const handleDecrement = () => {​
  setCount(c => Math.max(0, c - step));​
};​
​
const handleReset = () => {​
  setCount(0);​
};​
​
// ... JSX 中绑定这些函数和 step 输入框​

可以看到，状态更新的逻辑散落在三个不同的函数中，并且与组件本身紧密耦合。​

现在，我们用 useReducer 来重构它：

4.useReducer 相比useState优势体现在哪？​

4.useReducer 相比useState优势体现在哪？