保持纯组件

纯组件是指那些不依赖于外部状态的组件。它们只依赖于输入的props，并且不会改变。纯组件的输出只取决于它们的输入，因此它们是可预测的。

什么是纯函数

在计算机科学中，纯函数遵循以下规则：

1. 相同的输入总是产生相同的输出。
2. 不会产生副作用，例如修改全局状态或外部系统。
3. 不会改变输入的值。

比如一个函数add(a, b)，无论在什么情况下，只要输入是a和b，输出总是a + b。

纯组件本质上是一个纯函数，它接收props作为输入，并返回一个React元素作为输出。

什么是副作用

副作用是指函数或组件在执行过程中对外部状态进行修改的行为。例如，修改全局变量、发送网络请求、操作DOM等。

比如下面这个例子：

let guest = 0;

function Cup() {
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

这个例子中，guest变量被修改了，这会导致每次渲染时，guest的值都会发生变化，从而导致组件的输出不一致。

改写为纯组件后：

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

这样函数Cup就是一个纯组件，它只依赖于输入的guest，并且不会改变外部状态。

信息

一些框架会自动开启React.StrictMode，这会使得React在开发环境中多次渲染组件，从而发现一些非纯组件产生的副作用。

这个模式只在开发环境中有效，在生产环境中不会开启。

不过值得注意的是，它会让render方法执行两次，在开发环境中。

不可避免的副作用

有些副作用是不可避免的，例如：

1. 发送网络请求
2. 操作DOM
3. 修改全局状态

这些副作用是不可避免的，在React中，通常使用EventHandler、Lifecycle Method、useEffect等方法来处理这些副作用。这些方法中不必保持纯函数。

但绝大多数情况下，我们应该尽可能保持纯函数，这样可以让我们的组件更加稳定和可预测。

为什么React会崇尚纯函数

保持纯函数原则会带来一些限制约束，但同时也会带来很多好处：

• 组件可以运行在不同的环境中，例如服务器端和客户端。只要输入相同，输出就相同。
• 只要输入不变，就可以通过跳过渲染来提高性能。
• 使得在渲染过程中打断和恢复更加容易。
• 更容易进行单元测试。

回顾

• 纯组件：相同的输入总是产生相同的输出。
• 副作用：函数或组件在执行过程中对外部状态进行修改的行为。
• 我们应该尽可能保持纯函数，这样可以让我们的组件更加稳定和可预测。