React MCP技能入门：从零构建高效组件化开发能力

2次阅读

共计 1893 个字符，预计需要花费 5 分钟才能阅读完成。

刚接触 React 时，我们往往把所有逻辑堆在页面组件里。比如开发一个用户管理系统时，可能会遇到这样的场景：

用户列表需要从顶层组件穿透 5 层 props 才能到达表格组件
个人资料编辑弹窗的状态分散在 3 个不同组件中
每次修改搜索条件都会导致整个页面重新渲染

// 典型的 props drilling 示例
const Page = () => {const [searchParams, setSearchParams] = useState({});
  return (
    <div>
      <SearchBar params={searchParams} onChange={setSearchParams} />
      <UserList filters={searchParams} />
    </div>
  );
};

// 更深的层级时就会变得难以维护
const UserList = ({filters}) => (<UserTable filters={filters} />
);

MCP（Module-Component-Page）将应用分为三个层级：

模块层：处理业务逻辑和状态管理
组件层：纯粹的 UI 呈现
页面层：仅负责路由和模块组合

对比传统开发方式：

维度	传统方式	MCP 模式
复用性	组件耦合业务逻辑	纯组件可跨项目复用
维护成本	修改牵一发动全身	各层独立演进
测试难度	需要模拟完整环境	可分层单独测试

// modules/user.ts
const useUserModule = () => {const [users, setUsers] = useState<User[]>([]);

  const fetchUsers = useCallback(async (params: SearchParams) => {const data = await api.fetchUsers(params);
    setUsers(data);
  }, []);

  return {
    users,
    fetchUsers
  };
};

// components/UserCard.tsx
interface Props {
  user: User;
  onEdit: (user: User) => void;
}

const UserCard = memo(({user, onEdit}: Props) => {
  return (
    <div className="card">
      <Avatar src={user.avatar} />
      <h3>{user.name}</h3>
      <button onClick={() => onEdit(user)}> 编辑 </button>
    </div>
  );
});

const UserList = ({users}) => {
  const activeUsers = useMemo(() => users.filter(u => u.isActive),
    [users]
  );

  const renderItem = useCallback((user) => <UserCard user={user} />,
    []);
};

const EditModal = lazy(() => import('./EditModal'));

const Page = () => (<Suspense fallback={<Spinner />}>
    <EditModal />
  </Suspense>
);

包含单元测试的代码仓库：react-mcp-demo

任务：实现动态表单配置组件

创建 FormConfigModule 处理表单配置状态
开发纯 UI 组件 DynamicForm 根据配置渲染表单
在页面层组合这两个模块
添加字段类型验证功能

提示代码结构：

// modules/formConfig.ts
const useFormConfig = () => {const [config, setConfig] = useState<FieldConfig[]>([...]);

  const updateConfig = (newConfig: FieldConfig[]) => {
    // 验证逻辑...
    setConfig(newConfig);
  };
};

// components/DynamicForm.tsx
interface Props {config: FieldConfig[];
  onSubmit: (data: FormData) => void;
}

const DynamicForm = ({config, onSubmit}: Props) => {// 根据 config.type 渲染不同表单控件};

通过这种分层设计，你会发现 React 组件就像乐高积木，可以灵活组合出各种功能页面，同时保持代码的可维护性和性能表现。

正文完