🧱 一、React 组件设计最佳实践

1. 保持组件“纯粹”（Pure Components）

• 一个组件应是纯函数：给定相同的 props，始终返回相同的 JSX。

• 避免在渲染过程中修改外部变量或对象。

• ✅ 正确做法：使用 useState 触发更新，而不是直接修改 DOM 或全局变量。

• ❌ 错误示例：在 render 中修改 props 或调用副作用（如 localStorage.setItem）。

🔍 为什么重要？ 纯组件让 React 能预测性地重渲染，支持并发模式和性能优化。

2. 单一职责原则（Single Responsibility）

• 每个组件只做一件事。例如：

  • UserCard 只负责展示用户信息。

  • LoginForm 只处理登录逻辑。

• 将复杂 UI 拆分为多个小而专注的组件，提升可复用性和可测试性。

3. 合理使用 Composition 而非继承

• 使用 children 或 props 实现组合：

function Modal({ children, onClose }) {
  return (
    <div className="modal">
      <button onClick={onClose}>×</button>
      {children}
    </div>
  );
}

// 使用
<Modal onClose={hide}>
  <h1>欢迎</h1>
  <p>这是弹窗内容</p>
</Modal>

4. 避免过度嵌套与“Wrapper Hell”

• 过多的包装组件会导致结构混乱。

• 解决方案：

  • 使用 Fragment (<></>) 减少无意义的 div。

  • 合并逻辑相近的高阶组件（HOC）为自定义 Hook。

5. 使用 TypeScript 增强类型安全

• 为 props 添加接口定义，防止运行时错误：

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button = ({ label, onClick, disabled }: ButtonProps) => (
  <button onClick={onClick} disabled={disabled}>{label}</button>
);

💡 二、状态管理最佳实践

1. 状态提升（Lifting State Up）

• 当多个组件需要共享状态时，将状态提升到它们的最近公共父组件中。

• 示例：两个输入框同步显示相同文本 → 将 text 状态放在父组件中传递。

2. 最小化状态（Avoid Redundant State）

• 不要存储可以从 props 或其他 state 计算出的值。

• 使用 useMemo 缓存计算结果：

const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);

3. 使用 useState 处理简单状态

• 适用于局部状态，如表单输入、开关控制等。

• 注意：状态更新是异步的，使用函数式更新确保准确性：

setCount(c => c + 1); // 推荐

4. 使用 useReducer 管理复杂状态逻辑

• 适合状态转移逻辑较多的情况（如表单验证、购物车操作）。

• 将 action 与 reducer 分离，提高可维护性：

const [state, dispatch] = useReducer(taskReducer, initialTasks);

function handleAdd(text) {
  dispatch({ type: 'added', id: nextId++, text });
}

5. 使用 Context + useReducer 构建轻量级全局状态

• 避免“props 透传地狱”。

• 适用于主题、语言、用户认证等跨层级数据。

• 示例结构：

const TasksContext = createContext(null);
const TasksDispatchContext = createContext(null);

export function TasksProvider({ children }) {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
  
  return (
    <TasksContext.Provider value={tasks}>
      <TasksDispatchContext.Provider value={dispatch}>
        {children}
      </TasksDispatchContext.Provider>
    </TasksContext.Provider>
  );
}

⚠️ 注意：不要滥用 Context，频繁变化的数据可能导致不必要的重渲染。可用 useMemo 或拆分 Context 优化。

6. 使用 Ref 引用值（但不用于状态驱动）

• useRef 用于访问 DOM 元素或保存可变值（如定时器 ID），但它不会触发重渲染。

• 不要在渲染期间读取 ref.current，除非初始化（如懒创建实例）。

• 示例：聚焦输入框

const inputRef = useRef(null);
useEffect(() => {
  inputRef.current?.focus();
}, []);

7. 遵循“可信单一数据源”（Single Source of Truth）

• 每个状态应只在一个地方作为 state 存在。

• 其他组件通过 props 或 Context 获取，避免重复状态导致不一致。

✅ 总结：关键原则一览

参考资料

• 保持组件纯粹 – React 中文文档

• 迁移状态逻辑至 Reducer 中 – React 中文文档

• 在组件间共享状态 – React 中文文档