状态管理
概念
- 背景:react采用单向数据流, 用props自上而下传递,但嵌套层次深时,数据传递和通信变得困难
- 本质:通过共享内存来管理状态和进行组件间,页面间通信
- 定位:react是纯UI层框架,其将状态变动完全交给开发者
工具 local state ,props:
- 组件内数据传递,
- 解决大部分问题; context
- 子页面和子页面之间数据传递(或者嵌套过深时)
- 全局,耦合,产生很多不必要的更新,无法控制细粒度更新
- 主题 语言
单向Flux redux:
- flux:view发出action,dispatcher先注册事件,然后根据传过来的事件改变store的state,UI会监听store并更新
- redux: 解耦了action和dispatcher,增加了reducer来处理store的更新;单一数据源,只读,纯函数;适合大型项目,数据交互频繁的应用;
mobx
- 流程: 页面事件触发Actions, actions修改state, state更新computed value, 触发reactions更新UI
- 特点: 简洁,不需要编写繁琐的reducer, 但过于灵活;
原子recoil jotai
- context只能存单一值,而recoil具有原子性的原子状态,可以任意组合,可以实现局部更新;
- 核心是atom原子状态;组成selector
- 可以实现状态回溯,兼容react新特性
Zustand
- 和redux类似,跳过了dispatcher和reducer,直接使用setState
- 轻量级
异步密集Rxjs
实现一个简易状态管理工具
发布订阅模式
- store状态---中介---react UI层渲染
简易
- 属性:currentReducer, currentState, listeners, isDispatching
- 方法:getState, subscribe(往listeners中添加listener), dispatch(传入action,执行
currentReducer(currentState,action))
redux在项目中的实践
react使用
- 作为状态管理工具,解决组件间通信问题。
- 减少局部状态和redux状态的不合理混用
复杂模板代码
- UI->Action->中间件->Action(原始)->reducer->state
- 使用saga, thunk作为中间件将有副作用的action转换为原始action
redux toolkit
- 简化redux开发, 包括配置store,定义reducer和更新逻辑
- 提供hooks, 可以在函数组件中使用
