liaosw97 - 遵循 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。
- 明确可观察状态：使用
Mobx Best Practices by liaosw97 · d553cef
npx skillmds@latest add liaosw97/mobx-best-practices File contents
---name: mobx-best-practicesdescription: 遵循 MobX 最佳实践以实现可扩展的状态管理---- **遵循 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。
liaosw97/awesome-rules-skills/tree/main/plugins/mobx/skills/mobx-best-practices commit d553cefc66
Frequently asked questions
Run npx skillmds@latest add liaosw97/mobx-best-practices in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
遵循 MobX 最佳实践以实现可扩展的状态管理 It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.