保持组件纯粹

纯组件是构建可预测且易于理解的 React 应用的基础。理解纯粹性有助于编写更好的代码。

什么是纯函数?

纯函数满足以下条件:

• 只负责做一件事
• 相同的输入总是返回相同的输出
• 不会产生副作用

纯组件示例

function Recipe({ drinkers }) {
  return (
    <ol>
      <li>Boil {drinkers} cups of water.</li>
      <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
      <li>Add {0.5 * drinkers} cups of milk to boil and add sugar to taste.</li>
    </ol>
  );
}

避免副作用

副作用包括:

• 修改传入的 props
• 修改外部变量
• 直接操作 DOM
• 发起网络请求

何时产生副作用?

副作用应该放在事件处理函数或 useEffect 中,而不是在渲染过程中。

最佳实践

• 渲染逻辑应该是纯粹的
• 不要修改 props
• 在渲染前计算值
• 使用事件处理函数处理副作用

下一步

继续学习状态响应。