How do I install the Mobx React General Preferences skill?

Run npx skillmds@latest add liaosw97/mobx-react-general-preferences 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.

What does the Mobx React General Preferences skill do?

一般 React 偏好，优先使用带有 hooks 的函数式组件 It is listed under Web & Frontend on SkillMD.

Is Mobx React General Preferences safe to use?

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.

Which AI agents work with Mobx React General Preferences?

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.

Is Mobx React General Preferences free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mobx React General Preferences?

liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mobx React General Preferences by liaosw97

Name: Mobx React General Preferences
Rating: 4.5 (4 reviews)
Author: liaosw97

File contents

优先使用带有 Hooks 的函数式组件：
- 现代化开发：
  - 函数式组件结合 Hooks 是 React 官方推荐的现代开发范式。它使得组件逻辑更清晰、可复用性更高，并且避免了类组件中 this 的复杂性。
- 代码简洁性：
  - Hooks 允许你在函数式组件中直接使用状态（useState）、生命周期（useEffect）和其他 React 特性，从而减少了样板代码，使组件更简洁。
  - 示例：
```
import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from '../stores';

const Counter = observer(() => {
  const [count, setCount] = useState(0);
  const { appStore } = useStore();

  useEffect(() => {
    console.log('Component mounted or updated');
    return () => console.log('Component unmounted');
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button => setCount(count + 1)}>Increment</button>
      <p>App Status: {appStore.status}</p>
    </div>
  );
});

export default Counter;
```
- 逻辑复用：
  - 自定义 Hooks 使得逻辑复用变得非常简单和直观，你可以将状态逻辑和副作用封装成可独立测试和复用的单元。
- 性能优化：
  - 结合 React.memo、useCallback 和 useMemo 等 Hooks，可以对函数式组件进行更细粒度的性能优化，避免不必要的重新渲染。
- 与 MobX 兼容性：
  - mobx-react-lite 库专门为函数式组件和 Hooks 优化，提供了 observer HOC 和 useObserver Hook，使得 MobX 状态管理在函数式组件中表现出色。
- 社区支持：
  - 随着 Hooks 的普及，越来越多的库和工具都优先支持函数式组件和 Hooks，这使得开发生态更加丰富和活跃。

---name: mobx-react-general-preferencesdescription: 一般 React 偏好，优先使用带有 hooks 的函数式组件---- **优先使用带有 Hooks 的函数式组件**： - **现代化开发**： - 函数式组件结合 Hooks 是 React 官方推荐的现代开发范式。它使得组件逻辑更清晰、可复用性更高，并且避免了类组件中 `this` 的复杂性。 - **代码简洁性**： - Hooks 允许你在函数式组件中直接使用状态（`useState`）、生命周期（`useEffect`）和其他 React 特性，从而减少了样板代码，使组件更简洁。 - 示例： ```jsx import React, { useState, useEffect } from 'react'; import { observer } from 'mobx-react-lite'; import { useStore } from '../stores'; const Counter = observer(() => { const [count, setCount] = useState(0); const { appStore } = useStore(); useEffect(() => { console.log('Component mounted or updated'); return () => console.log('Component unmounted'); }, []); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> <p>App Status: {appStore.status}</p> </div> ); }); export default Counter; ``` - **逻辑复用**： - 自定义 Hooks 使得逻辑复用变得非常简单和直观，你可以将状态逻辑和副作用封装成可独立测试和复用的单元。 - **性能优化**： - 结合 `React.memo`、`useCallback` 和 `useMemo` 等 Hooks，可以对函数式组件进行更细粒度的性能优化，避免不必要的重新渲染。 - **与 MobX 兼容性**： - `mobx-react-lite` 库专门为函数式组件和 Hooks 优化，提供了 `observer` HOC 和 `useObserver` Hook，使得 MobX 状态管理在函数式组件中表现出色。 - **社区支持**： - 随着 Hooks 的普及，越来越多的库和工具都优先支持函数式组件和 Hooks，这使得开发生态更加丰富和活跃。

Frequently asked questions

Mobx React General Preferences