React 中如何正确使用 MobX 和 observer？

在 React 中用 MobX，核心是让读取 observable 的组件被 observer 包住。store 可以通过 Context、props 或模块变量传入；实际项目更推荐 Context，测试和多实例更好控。observer 会追踪组件渲染时真正读到的 observable，相关字段变化才重渲染，所以不要在外层提前把 observable 解成普通值再传下去。函数组件优先用 mobx-react-lite，类组件或旧项目才考虑 mobx-react。

追问

observer 应该包父组件还是子组件？

谁读取 observable 就包谁。把整个 App 包起来不等于所有子组件都响应，细粒度 observer 反而更容易减少无关渲染。

Context 里的 store 要不要经常替换？

通常不要。Provider 的 value 保持同一个 store 实例，更新 observable 字段即可；频繁替换 store 会让依赖关系和测试都变复杂。

组件为什么没有更新？

优先查三件事：组件是否用了 observer，读取的对象是否真是 observable，是否在 observer 组件外提前解构成普通值。

第三方组件能直接吃 observable 吗？

不建议。第三方组件不是 observer，传入前最好转成普通数据，或只传它需要的字段。

写段代码

jsx
const StoreContext = createContext(null)
export const useStore = () => useContext(StoreContext)

const TodoList = observer(() => {
  const store = useStore()
  return store.todos.map(todo => <span key={todo.id}>{todo.text}</span>)
})