08｜复杂状态处理：如何保证状态一致性？
王沛
你好，我是王沛。今天我们聊聊 React 中的状态管理。
从这节课开始，我们就进入到了实战篇的训练。React Hooks 中其实有一些通用原则和常见设计模式，所以我设计了几个典型的业务场景，这样你就可以对这些原则和模式有一个具体的印象，之后在遇到类似场景时，也能从容应对。
今天我们先从状态一致性这个需求开始讲起。我在基础篇就反复提到过，React 中 UI 完全是通过状态驱动的。所以在任何时刻，整个应用程序的状态数据就完全决定了当前 UI 上的展现。毫不夸张地说，React 的开发其实就是复杂应用程序状态的管理和开发。因此，这就需要你去仔细思考，该怎么去用最优、最合理的方式，去管理你的应用程序的状态。
所以今天这节课我会带你围绕状态一致性这个需求，介绍两个基本原则，它们能帮助我们避免很多复杂的状态管理逻辑，简化应用程序的开发。
原则一：保证状态最小化
新接触 React 的同学经常会有一个错误的习惯，就是把 State 当变量用，很容易把过多的数据放到 State 里，可以说这是对 State 的一种滥用。
那到底该怎么使用 State 呢？我们需要遵循一个原则，即：在保证 State 完整性的同时，也要保证它的最小化。什么意思呢？
就是说，某些数据如果能从已有的 State 中计算得到，那么我们就应该始终在用的时候去计算，而不要把计算的结果存到某个 State 中。这样的话，才能简化我们的状态处理逻辑。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
React中处理复杂状态时，保证状态一致性至关重要。本文通过电影搜索列表的例子强调了遵循状态最小化原则可以简化状态管理并保证一致性。作者提出了避免定义多余状态，通过计算得到最终需要展现的结果，简化状态管理。文章介绍了使用useMemo这个Hook来缓存计算结果，提高性能。强调了遵循唯一数据源的原则，将URL作为唯一的数据来源，简化状态管理，保证一致性。通过实际案例展示了如何在React中处理复杂状态时遵循状态最小化原则，简化状态管理并保证状态一致性。文章还通过实例展示了创建自定义受控组件的实际应用，强调了避免冗余状态和唯一数据源原则。总结了React开发中的重要原则，包括状态最小化和唯一数据源原则，以及提出了思考题，鼓励读者深入思考和讨论。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Hooks 核心原理与实战》，新⼈⾸单¥59
《React Hooks 核心原理与实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(26)
- 最新
- 精选
- Geek_e6b8eb置顶真的后悔没有早一点看到这个课程，之前我就维护了很多中间代码，最后弄得一个组件超级复杂。 /(ㄒoㄒ)/~~2022-03-283
Isaac思考题回答： 由于 hisgory.pushState 不会触发页面重新渲染，也不会导致组件更新，所以，默认的 userSearchParams 只会获取第一次的 URL 上的查询字符串。因此，为了解决这个问题，可以通过监听 pushstate、replaceState 等事件，对状态进行同步。 其实去阅读 react-us 的源码实现，也是采用了这种办法。 https://github.com/streamich/react-use/blob/90e72a5340460816e2159b2c461254661b00e1d3/src/useSearchParam.ts#L8作者回复: 赞~ history API 是比较特别的，只能用 patch 的方法来监听 url 变化。
2021-06-10515
Jerryz默认 history.pushState 和 history.replaceState 都没有对应的监听事件。react-use patch 了history 对象。作者回复: 👍
2021-06-1038- Geek_0330fereact-use 的 useSearchParams 中也使用了一个 state 去维护了一个状态，这是不是说明复杂度不会消失，只会转移呢？我们只是把我们本来要维护的那个状态交给第三方库去维护了。
作者回复: 第三方库的目的正是简化你的应用逻辑。其内部如何实现都不会影响你的应用的复杂度，也无需关系它内部如何实现。
2021-07-1824 
Geeker状态最小化原则直接影响了代码的复杂度作者回复: 可以说，直接降低了代码复杂度~
2021-06-104- Isaac老师，文章中的列表筛选的例子，虽然使用 useMemo 可以缓存，但是如果多个组件实例用到，岂不是还是会出现多次计算？
作者回复: 是的，跨组件的数据共享就需要 Redux 这样的全局状态管理机制了。
2021-06-1083 
守望这是不是和单向数据流差不多呀！！！ 数据流向总是一条线，不要开新分支作者回复: 虽然看上去有点像，但不太一样哦~
2021-06-102
傻子来了快跑丶// 每当 searchKey 或者 data 变化的时候，重新计算最终结果 老师这个地方有问题吧，一般我们是通过关键字去拿接口的data数据，你这个demo data数据并不是通过keyword获取过来的，而是直接传入的一个data，是有问题的，应该通过状态提升，也就是 const filtered = useMemo(() => { return data.filter((item) => item.title.toLowerCase().includes(searchKey.toLowerCase()) ); }, [searchKey, data]); 这段代码应该在父组件中，拿到data数据之后再传进去作者回复: 数据处理为什么要在父组件呢？
2021-06-1042
寇云老师第一个例子中，数据的请求放到当前组件中好还是由外部传入好？2021-06-122- Geek_130786// 处理用户的搜索关键字 const handleSearch = useCallback(evt => { setSearchKey(evt.target.value); setFiltered(data.filter(item => (item.title.includes(evt.target.value)))); }, [filtered]); 老师，这里useCallback中没有使用到filtered，为什么依赖需要设置filtered？2024-02-20归属地：浙江
收起评论