前言

在 React 的开发过程中，你可能听过这样的建议：“在组件渲染逻辑中，不要引入副作用。” 这句话的背后有着深刻的设计哲学，理解这一点对于写出高效、稳定且可维护的 React 代码至关重要。本文将详细解释为何 React 中的渲染逻辑需要保持纯净，以及如何正确处理副作用。

什么是渲染逻辑的纯净性？

在函数式编程的世界中，纯函数（Pure Function）是指在相同的输入下，始终会返回相同输出的函数，并且在执行过程中不会产生任何副作用。React 组件的渲染逻辑就应当像纯函数一样，输入 props 和 state，输出 JSX 元素。

纯净的渲染逻辑意味着：

保持渲染逻辑纯净有助于确保组件在不同渲染周期中的一致性和可预测性。通过这种方式，React 可以更好地管理 UI 的更新，避免不必要的错误和复杂的调试过程。

当然，特殊情况需要特殊处理，这两条规则并不是绝对的。

为什么副作用在渲染时不被允许？

在 React 中，副作用（Side Effect）是指任何会影响到组件外部状态的操作。这些操作可能包括：

在渲染过程中，如果你的组件逻辑修改了外部对象或变量，React 的虚拟 DOM 和 Fiber Tree 就会失去对这些变化的控制权，导致 UI 更新的不确定性。这种情况下，组件可能无法保持预期的行为，特别是在应用规模扩展时，这种问题可能会更加棘手。

举个例子，假设我们有以下代码：

let count = 0;
function MyComponent() {
  count++; // 修改了外部变量 count 的值，这是一个副作用
  return <div>{count}div>;
}

每次 MyComponent 组件渲染时，外部变量 count 的值都会被修改。这种做法会导致不可预测的渲染结果，因为 count 的值在每次渲染时都在变化，而这些变化并不受 React 状态管理的控制。

如何正确处理副作用？

为了避免副作用影响渲染逻辑，React 提供了 useEffect 钩子。这是一个专门用于处理副作用的函数，允许你在组件完成渲染后执行副作用操作，从而保持渲染逻辑的纯净性。

以下是一个典型的 useEffect 示例：

function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 这是副作用：更新文档标题
    document.title = `You clicked ${count} times`;
  }, [count]); // 依赖 count，当 count 变化时副作用重新执行
  return (
    <div>
      <p>You clicked {count} timesp>
      <button onClick={() => setCount(count + 1)}>
        Click me
      button>
    div>
  );
}

在这个例子中，document.title 的更新是一个副作用，React 将其放在 useEffect 中，这样可以保证组件的渲染逻辑保持纯净。useEffect 会在组件渲染完成后执行，不会干扰渲染过程。

总而言之

理解并遵守 React 渲染逻辑的纯净性原则，对于编写稳定且高效的 React 应用至关重要。通过将副作用放在 useEffect 中处理，你可以确保组件的每次渲染都是可预测的，且不会因外部状态的变化而导致意外行为。这不仅提高了应用的可维护性，也减少了调试和优化的复杂性。

当你在开发 React 应用时，请记住：保持渲染逻辑纯净，将副作用放在 useEffect 中！ 这是确保你的组件在任何时候都能如期工作的关键。