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

Question

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

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

1. 将 a 放入console.log子组件中。

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

3.使用React开发工具

所有这些方法都可以正确地了解组件是否真的重新渲染吗？因为它似乎不能与 React.memo 一起正常工作。

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

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

现在我怀疑，油漆闪烁是否无法正常工作或 React.memo 有问题？

Answer 1

原因

\n\n

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

\n\n

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

\n\n

\n

此外，React.PureComponent\xe2\x80\x99s shouldComponentUpdate() 会跳过整个组件子树的 prop 更新。确保所有子组件也是 \xe2\x80\x9cpure\xe2\x80\x9d。

\n

\n\n

结果

\n\n

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

\n\n

// Before\nexport default Cars;\n// After\nexport default React.memo(Cars);\n

\n\n

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

\n\n

之前\n

\n\n

之后\n

\n\n

结论

\n\n

两者console.log都react-dev-tools运行良好，您可能只需要根据您的需求以正确的方式实施即可。

\n