160 - 《数据流 2022》

上周把主流数据流代表的源码翻了一遍，同时看到内网同学闻冰有写一篇 6000+ 字的「谈谈复杂应用的状态管理（上）：为什么是 Zustand」，手痒也想写写我对于现阶段数据流方案的理解。

1、说到数据流，大家可能会想到老牌的 Redux、Dva、Mobx、RxJS、XState，也可能会想到新一代的 Recoil、Jotai、Zustand、Valtio、React Tracked、Redux Toolkit，以及还有很多使用度没那么广的方案 use-context-selector、react-easy-state、hox、useModel in umi、icestore、kylva、overmind 等，同时很多简单场景可能会直接裸用 hooks 组织。这些方案大家应该多少都有用过一些，那他们之间有啥区别？又应该如何选择？选择时应该如何考虑呢？

2、数据流方案应该关注啥？ 整理之后发现还是有不少的。比如心智模型、读取数据、写入数据、数据推导、异步 Action、渲染性能优化、Suspense 并发模式支持、SSR 支持、React 之外访问、组件封装、瞬时更新、插件中间件扩展、Redux DevTools 支持、兼容性、多实例和单实例、数据序列化能力、同步/异步更新、内存管理、测试、包尺寸等。（还有啥？）大部分数据流方案都考虑了这些点，区别是实现方式和使用体验上的差异。

3、心智模型指的是「外部 store」和「内部 store」的区别。外部 store 以数据为中心，设计应用时设计的是数据，从数据角度出发，无需考虑组件，从上到下地组织，比如 Redux、Dva、Zustand 等都属于这类；内部 store 以 React 组件为中心，设计应用时以组件为主，从下到上原子化的组织（原子是一个最小但完整的状态单位，它们是小块的状态，可以连接在一起形成新的派生状态，最终形成了一个图），比如新出的 Recoil、Jotai、React Tracked 都是此类。

4、写入数据直接影响研发体验，分「immutable」和「mutable」。比如 state => return { …state, count: state.count + 1 } 是 immutable，而 state => state.count += 1 是 mutable，后者明显更符合编码直觉，尤其是涉及嵌套结构时，immutable 写起来会比较痛苦。从实现上看，基于 proxy 的通常是 mutable，比如 Valtio、React Tracked、MobX；其他都是 immutable。但由于 immer 的存在，很多 immutable 的方案都可借此实现 mutable 写入数据。那基于 proxy 是不是没优势了？不是的。

5、proxy 影响的除了