158 - 《手撕源码 21：Valtio》

Valtio 的作者和 zustand 一样，也是 Daishi Kato，就不重复介绍了。

Valtio 是 mutable state 的数据流，和 mobx、overmind、react-easy-state 是同一类。相比 immutable state 数据流，mutable state 数据流的优点是 1）数据更新更符合习惯 2）原子化更新优化，无需手写 selector 函数；同时缺点也比较明显，1）由于基于 Proxy 实现所以兼容性要求高，比如不支持 IE 或支持起来有缺陷 2）对一些数据结构有限制比如 Map。

先看使用方式。

// 1、定义数据
const state = proxy({ count: 0 });
// 2、在 react 外使用和更新数据
state.count += 1;
// 3、在 react 中使用和更新数据
const snap = useSnapshot(state);
snap.count;
state.count += 1;

再看源码。整体分两部分，定义数据的 proxy 和使用数据的 useSnapshot。我提取了下核心代码（未支持嵌套对象），仅 109 行，见 toy-valtio.ts · GitHub。代码量少还有个原因是复杂的「自动渲染优