前言

众所周知，在 React 中 UI = render( data)

状态管理

  • 状态变化前的异步逻辑
  • 状态改变带来的变动，或者说回调
    • 状态渲染
    • 逻辑处理

异步处理

setState

不会马上修改状态，异步地批量处理，对状态进行合并

Redux action

在修改全局 state 之前也要经历中间件处理

实现思路

状态存储

对象，多个状态就是 多对 key-value

监听对象变化

api方法

函数式

需要一个方法：

  1. 在其中处理state变化之前的逻辑
  2. 处理状态带来的变化
  3. 修改状态只能在这里修改

直接修改状态对象无效

那这方法在 React 中不就是 useState 带来的 setState嘛
调用 setState 之后：

  1. 状态的异步批量修改
  2. 触发状态变化之后的视图渲染
  3. 相关的Hook
  4. 相关的生命周期

代理 get 、set

响应式

对对象的属性代理 get 和 set 方法

  1. get：将依赖该状态的逻辑都存在一起，像是订阅
  2. set：修改状态时，发布相关消息通知依赖逻辑处理
    1. 比如视图渲染、逻辑执行

      用 Object.defineProperty 修改代理

合并状态修改逻辑

不是每次状态修改都有价值，比如修改为一样的值，或者还没进行相关逻辑处理，又修改了新的值，那旧的值直接抛弃就好了

还没进行相关处理是因为 本来就是 异步的

React.useState

setState 传入的不是最终 state 而是 state 的diff，React 内部将这些 diff 更新到state

组件间通信

props

一层层传递，多了麻烦

Context

在 context 中存放 state，state 变化直接触发相应变动
但是还不够打
context 终究也只支持了状态变化后的相应变动。
而没有状态变化前的异步逻辑处理，就没法处理多个组件都要修改 值的情况

你可以进行一些封装，但是还不如直接上 全局状态管理库

Redux

redux 就是提供 api 修改，reducer 方法对传入的 action 进行处理，返回新的 stateimage.png
函数式

mobx

对全局 state 做代理，响应式，面向对象