React 组件设计：从能用到好维护

写 React 组件时，最容易出现的问题不是“页面做不出来”，而是组件随着需求增长逐渐变得难以理解。一个文件里同时处理请求、状态、弹窗、表格和权限，短期看很快，后续每次改动都可能影响别的功能。

先确定组件的职责#

一个组件最好只回答一个问题。例如，UserTable 负责展示用户列表，UserEditor 负责编辑用户，而获取数据的逻辑交给页面或专门的 Hook。拆分的标准不是文件行数，而是变化原因：如果两段代码总因为不同需求而修改，就应该考虑分开。

function UserPage() {
  const users = useUsers();

  return (
    <main>
      <PageHeader title="用户管理" />
      <UserTable users={users.data} />
    </main>
  );
}

让属性表达业务意图#

好的属性名称能让调用者直接看懂组件。相比 type="1"，variant="danger" 更明确；相比传入十几个布尔值，使用少量互斥的状态通常更安全。

不要急着把所有内容都做成配置。对于标题、说明和操作区，使用 children 或具名插槽式组件往往更灵活，也更符合 React 的组合思路。

把状态放在合适的位置#

只被一个组件使用的状态留在组件内部；多个兄弟组件共同依赖的状态再提升到父组件。过早放进全局状态会增加理解成本，也会让一次简单交互触发更多更新。

判断方式很简单：谁需要读取它，谁需要修改它，它需要保存多久。答案明确后，状态应该放在哪里通常就清楚了。

保留清晰的边界#

组件内部可以复杂，但对外接口应该稳定。数据格式转换、默认值和异常兼容尽量在边界处完成，让渲染部分只处理可靠的数据。这样既减少条件判断，也让组件更容易测试和复用。

可维护的组件并不追求最少代码，而是让下一次修改发生在可预期的位置。