0.前言

本篇博客是状态管理杂谈，主观阅读记录。

1.状态管理方式

1.1 React组件中的状态传递方式

1. 父子通信

2. 子父通信

3. 兄弟组件通信。

   

1.2 使用Context API 维护全局状态

Context API 有 3 个关键的要素：React.createContext、Provider、Consumer。

1.3 Redux 设计模式

历史：MVC $\rightarrow$ Flux $\rightarrow$ Redux (单向数据流)

1.4 useReducer（Hooks组件）

简易版 Redux。

2.Redux

• 优点：

  • 状态持久化（组件销毁了，store也还在）

  • 状态可回溯（每次action，不会修改原有状态，总是返回新的状态）

  • 纯函数：无任何副作用。副作用的含义，见下

    function add(a,b){
      fn() // 副作用，不知道这里做了啥？
      return a + b
    }
    

  • 拥有大量优秀的第三方中间件插件，能够更精细地控制数据的流动，对复杂的业务场景起到了缓冲的作用。

• 缺点：

  • 繁重的模板代码
  • store的状态残留，比如说，多个页面用到同一个数据源，在离开页面的时候使用初始化清空的问题。
  • 无脑的发布订阅：每次 dispatch 一个 action 都会遍历所有的 reducer，重新计算 connect，这无疑是一种损耗；
  • 交互频繁时会有卡顿：如果 store 较大时，且频繁地修改 store，会明显看到页面卡顿。
  • 时间回溯成本太高，每次都要更新引用，除非增加代码复杂度，或使用 immutable
  • 不支持 Typescript。

3. Mobx

• 与 Redux 的区别，Mobx 为响应式编程，编程风格基于传统的面向对象的范式。
• 具体的实现：Vue 是采用数据劫持的方式来达到监听的操作（Object.defineProperty的方式|ES6 proxy）Redux则是采用 eventHub。
• Vue官网：React+Mobx = Vue
• 优点：
  • 代码量少
  • 基于数据劫持实现，真正意义上的局部更新。
  • 响应式性能良好
  • 完全可以取代 React 自身的状态管理。
  • 支持 Typescript
• 比较：Redux | Mobx
  • Redux：背靠函数式，开源界标配
  • Mobx：面向对象，更关注对响应后的状态的处理，内部已经帮你实现了属性监听。

4.观点摘抄

1. 组件变得臃肿。有的时候几个组件共用一个 state，这时候就不得不把这个 state 提升到这几个组件的共同父级组件。在这种情况下，组件所持有的一些特定状态往往很不 make sense，而只是为了组件间通信而强行加上去，导致某些组件变得十分臃肿，在 Class Component 中，可通过：

   • Hoc
   • render props

2. redux 与 Mobx 的分治思想：Redux 中可以分解 reducer，Mobx 可以分解 store。

   

5.状态管理库记录

1. Jotai

2. dva

   看不懂，集成了saga，目前查到的最新评价对此都不是很正向，可能有很多我考虑不到的场景吧。

3. Recoil

4. rematch

   写法很像vuex。

   省略了：ActionType，ActionCreator (规范化Action创建的过程)，switch 等。

6.未解决的问题

在查找资料的过程中，发现了两个有趣的知识点，以前碰到过，之前没放心上，这里做个临时的记录。

1. 使用 StrictMode 时，开发环境下 React 会故意渲染2次，以此触发潜在的副作用。

   知乎地址：https://www.zhihu.com/question/387196401

2. 跨域解决方案：

   • proxy怎么配：在package.json中加上 proxy 代理配置。
   • Creat-react-app 中使用了 http-proxy-middleware
   • nginx配置反向代理。
   • https://www.cnblogs.com/yy136/p/12674972.html

7.参考资料：

1. 数据流管理方案：Redux 和 MobX 哪个更好？ (opens new window) 深度一般，但是总结还行。

2. facebook大佬：从前端状态管理，到响应式编程 (opens new window)

3. Redux 包教包会系列 (opens new window)

   里面给出了具体的案例，有空一定要敲一敲，里面那个分解reducer的图实在是画的太清楚了。

4. 函数式编程、响应式编程、函数响应式编程 (opens new window)

   除了读不懂，其他写的都挺好的。

5. 在react/redux中使用Immutable (opens new window)

   写的非常好，Immutable我也是第一次听说过。