如何正确检测 React JS 中的重新渲染？

Posted 2023-02-22

【中文标题】如何正确检测 React JS 中的重新渲染？

【英文标题】：How to detect rerenders in React JS correctly?

【发布时间】：2020-06-08 19:23:38

【问题描述】：

假设我们有一个父组件和多个功能性子组件。我想清楚地知道父母是否重新渲染孩子是否重新渲染。

在阅读了几篇文章后，我了解到有 3 种方法可以检测重新渲染。 （如果有更多方法，请告诉我。）

1.在子组件中放入console.log。

2。在设置中使用 Chrome 油漆闪烁选项。

3.使用 React 开发工具

是否所有这些方法都可以正确判断组件是否真的重新渲染？因为它似乎不适用于 React.memo。

当我用 React.memo 包装子组件时，它不会打印 console.log，当父组件重新呈现时这是正确的。但仍然使用 chrome 和 react 开发工具突出显示子组件，就好像它重新渲染一样。

代码沙盒：https://codesandbox.io/s/bold-cloud-iv0rv （如果我们添加一辆新车，静态组件仍以绿色突出显示，但根据备忘录，它不应该重新渲染。）

现在我怀疑，是油漆闪烁不能正常工作还是 React.memo 有问题？

【问题讨论】：

您确定可以在您的沙盒控制台中看到正在打印的日志吗...

@pavankumar，对于第一次渲染，它肯定会打印出来，但是如果组件用 React.memo 包裹，当点击添加按钮时，它不会为后续渲染打印 console.log。

【参考方案1】：

原因

如果您使用React.memo，则需要从父级到所有子级一直使用到最后。

由于React.PureComponent与React.memo具有相同的功能，您可以在下面的文档中找到这些解释。

此外，React.PureComponent 的 shouldComponentUpdate() 会跳过整个组件子树的 prop 更新。 确保所有子组件也是“纯”的。

结果

通过更改父组件Cars 为备忘录

// Before
export default Cars;
// After
export default React.memo(Cars);

您会发现 chrome 中的 react-dev-tools 只会显示这次重新渲染的父组件，并且不会触发子组件 console.log，这是正确的。 （与以前相比，所有的孩子也被突出显示）

之前

之后

结论

console.log 和 react-dev-tools 都运行良好，您可能只需要按照您的需求以适当的方式实施即可。

【讨论】：

you need to use it from parent down to all the child till the end. 是我错过的最重要的概念。非常感谢您的详细解释。确实，它帮助我清楚地了解了如何使用备忘录。