# Mobx Best Practices

> 遵循 MobX 最佳实践以实现可扩展的状态管理

- Skill: `liaosw97/mobx-best-practices` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/mobx-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/mobx-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/mobx-best-practices

---


- **遵循 MobX 可扩展状态管理的最佳实践**：
  - **明确可观察状态**：使用 `@observable` 或 `makeObservable` 明确定义哪些属性是可观察的，避免不必要的响应。
  - **使用计算值（`@computed`）**：对于从可观察状态派生出的值，使用 `@computed`。它们只在依赖项改变时重新计算，提高性能。
  - **使用动作（`@action`）修改状态**：所有状态修改都应通过 `@action` 标记的函数进行，这有助于调试和确保状态更新的原子性。
  - **避免在渲染中修改状态**：不要在 React 组件的 `render` 方法或函数组件的顶层直接修改 MobX 状态，这可能导致无限循环或不可预测的行为。
  - **细粒度可观察性**：尽量使可观察状态的粒度更细，例如，将一个大对象分解为多个小对象，这样只有当特定部分改变时才会触发更新。
  - **使用 `reaction` 或 `autorun` 进行副作用处理**：对于需要响应状态变化并执行副作用（如日志记录、网络请求）的场景，使用 `reaction` 或 `autorun`，而不是在组件中直接处理。
  - **依赖注入**：使用 React Context 或其他依赖注入模式来提供 MobX store，避免 prop drilling。
  - **严格模式（`useStrict`）**：在开发模式下启用严格模式，强制所有状态修改都通过 action 进行，有助于早期发现问题。
  - **测试**：为 MobX store 编写单元测试，确保状态逻辑的正确性。
  - **避免过度使用 MobX**：对于简单的组件内部状态，可以考虑使用 React 的 `useState` 和 `useReducer`，而不是总是引入 MobX。