React 集成
mobx-react-lite 提供 observer:把函数组件变成 derivation,render 中读的 observable 自动成为依赖,变更时组件重渲染。
1. observer
- 包裹函数组件或
observer(Component)。 - 不要在 observer 外读 observable 再当 props 传入(会丢追踪),应在 observer 组件内读。
2. 与 Hooks
| 模式 | 说明 |
|---|---|
observer(() => …) | 推荐 |
局部 useLocalObservable | 组件私有 store |
useObserver | 旧 API,少用 |
3. 性能
- 拆分 observer 子组件,避免一个大 observer 读全 store。
- 列表项各自 observer。
- 非响应式 props 用
React.memo+ observer 子节点。
4. 与 Concurrent React
MobX 6 + mobx-react 6 适配 useSyncExternalStore 路径(版本依 package 为准);避免在 render 里触发未批处理的同步外设。
5. 总结
集成层很薄:render = tracking function;核心仍在 02-依赖追踪。