一个表单表单状态把 Context 撑爆的真实案例,以及为什么换成 useReducer 就稳了
当复杂表单因 Context 状态更新粒度过粗导致全树重渲染时,问题不在 Context 本身,而在于状态设计。将 `useState` 替换为 `useReducer`,并拆分 state 与 dispatch 为独立 Context,再按业务模块进一步细分为多个 Context,能让组件只订阅自身关心的数据。改造后渲染范围大幅缩小,性能从卡顿恢复至 60fps,且无需引入第三方状态库。
共 1 篇文章
当复杂表单因 Context 状态更新粒度过粗导致全树重渲染时,问题不在 Context 本身,而在于状态设计。将 `useState` 替换为 `useReducer`,并拆分 state 与 dispatch 为独立 Context,再按业务模块进一步细分为多个 Context,能让组件只订阅自身关心的数据。改造后渲染范围大幅缩小,性能从卡顿恢复至 60fps,且无需引入第三方状态库。