5分钟弄懂react状态管理前世今生
date
Sep 14, 2023
slug
react_state_management
status
Published
tags
Website
react
frontend
前端
summary
状态表示组件当前状况的js对象。可以使用useState去维护这些状态，通过props传递给子组件。
为了避免状态传递过程中的混乱react引入了“单向数据流的概念”。
type
Post
状态
表示组件当前状况的js对象。可以使用useState去维护这些状态，通过props传递给子组件。
为了避免状态传递过程中的混乱react引入了“单向数据流的概念”。
状态管理库要解决的问题
- 组件树的「任何地方」读取存储状态
- 写入能力
- 提供「优化渲染」的机制
- 提供优化内存使用的机制
- 与「并发模式」的兼容性
- 数据的持久化
- 上下文丢失的问题
- props失效的问题
- 「孤儿」问题
React Context（outdated see useContext）
不想父传子一层层传递，从而把数据状态抽象到公共的地方，使用contextapi，组件树上的组件都可以共享这些状态。
Class时代
Redux
工作流程大致如下
- 用户在view层触发某个事件，通过dispatch发送了action和payload
- action和payload被传入reducer函数，返回一个新的state
- store拿到reducer返回的state并做更新，同时通知view层进行re-render
优点：
- 繁荣的社区，扩展性好，有很多中间件
- 单一的数据源且是树形结构，有redux-devtool可以调试
缺点
- 有一些学习成本
- 模版代码相对比较多，造成额外成本
- 状态比较多的时候，性能比较差，state更新会影响所有组件
- reducer要返回的是一个新对象，如果要更新的值比较深，成本也很
Dva
对redux的使用层面的升级，降低了上手难度，但是钩子出现之后现在已经不维护了
Zustand
zustand 是一个轻量级状态管理库，和 redux 一样都是基于不可变状态模型和单向数据流的，状态对象 state 不可被修改，只能被替换。渲染优化要手动通过 selectors 进行。
Zustand vs Redux
- 都基于单向数据流。
- 不过，redux 需要应用被 Context Provider 包裹，zustand 则不需要，只需要一个钩子。
- 模版代码更少
- 对typescript支持更好