周三下午，你刚提交了一个计数器组件。代码简洁，逻辑清晰，产品经理点头通过。
第二天，需求变了。计数器需要支持自定义增减、重置、边界检查。你开始写第二个函数，第三个，第四个……到第五个的时候，你发现自己正在制造一团乱麻。
打开网易新闻 查看精彩图片
这不是你的问题。这是useState的边界。
打开网易新闻 查看精彩图片
useState擅长处理简单的状态——一个数字、一个布尔值、一段字符串。但当状态的更新方式超过三种，麻烦就来了：逻辑散落在组件各处，调试时需要逐个函数追踪，稍有不慎就会漏掉关联状态的同步更新。
想象一下购物车场景：商品列表、总价、商品数量三个状态，每次添加商品都要同时更新。用useState，你得调用三次setter，漏一个界面就出错。
useReducer正是为解决这种复杂性而生。
打开网易新闻 查看精彩图片
它的核心机制很简单：用一个reducer函数统一管理所有状态变更。你不再直接操作状态，而是发送一个"动作"（action），由reducer决定如何响应。就像银行柜台——你不会直接修改账户数字，而是提交"存款500"或"取款200"的指令，柜员根据规则处理后返回新余额。
语法结构清晰：const [state, dispatch] = useReducer(reducer, initialState)。state是当前状态，dispatch是触发变更的函数，reducer是你编写的处理规则。
当组件拥有三个以上状态，或状态之间存在复杂联动时，useReducer的优势开始显现。所有更新逻辑集中在一处，代码的可读性和可维护性大幅提升。
热门跟贴