如何在 React 中检查组件是否被重新渲染？

Question

我使用 React 已经近 3 年了，但有时会在“渲染”的含义上遇到困难。

实际上，为了检查“渲染”，我刚刚输入了

console.log('render')

在之前的组件中

return <>...</>

这是正确的检查吗？或者我无法知道是否重新渲染？

Answer 1

您可以在组件外部声明一个变量，并将其初始化为0，然后从组件内部递增它：

let count = 0;
const Component = () => {
count++;
console.log("component render number: ", count);
//...
}

这个技巧会让你看到日志

component render number: n

每次调用函数时，因为组件毕竟是一个函数，但组件可能只被调用而不重新渲染，因此您所做的不是正确的检查方法。

为了理解我们可以在没有严格模式的情况下尝试这个简单的代码：

let count = 0;
const Component = () => {
count++;
console.log("component render number: ", count);
//...
}

在这里我们首先看到

component render number: 1

我们还知道，只有当状态采用不同的值时，组件才会重新渲染，因此当我们第一次单击按钮时，我们期望看到

component render number: 2

因为状态值从 传递0到1，并且发生了这种情况。

现在，当我们再次单击该按钮时，我们不会看到

component render number: 3

因为状态采用相同的精确值，所以组件不必重新渲染，但无论如何我们都会看到日志。

为什么会发生这种情况？

事实上，在这种情况下，组件没有重新渲染，而只是调用

如果您从Reducer Hook返回与当前状态相同的值，React将在不渲染子项或触发效果的情况下退出。（React 使用 Object.is 比较算法。）

简短的回答

如果您只想在组件重新渲染时查看日志，最简单的方法是创建一个不带依赖项数组的useEffect钩子，这将使其在每个组件渲染后运行：

useEffect(() => {
  console.log("component rerendered");
});

现在，当我们第二次单击按钮时，我们只看到

component render number: 3

和不

component rerendered