最近刚接触 react 没多久,参考了 flutter 里的一些实现撸了个轻量级的轮子来实现组件间 state 共享:
特点:
- 轻量级,比 redux 简单,可以在库工程里使用
- 体积小,不足 1kb
- 最小范围的重新渲染。例如下图 b 和 e 共享 state,当 state 值变化时只重新渲染 b 和 e:
a
+-+-+
| | |
b c d
|
e
- 允许在 state 值指定字段发生变化时才重新渲染组件:
// 获取共享的 state,且在 age 字段发生变化时才更新被 hook 的组件
const state= useSharedState<User>(UserContext, (current, prev) => current?.age !== prev?.age);
核心原理:
- shared state 设计为 notifier 模式
- 使用 context hook 来在组件间共享 shared state
- useSharedState 的 hook 实现自动注册/反注册 listener
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。