如何正确检测 React JS 中的重新渲染？
How to detect rerenders in React JS correctly?
假设我们有一个 parent 组件和多个功能 child 组件。我想清楚地知道 parent re-renders 是否执行 child re-renders 。
在浏览了几篇文章后，我了解到有 3 种方法可以检测重新渲染。 （如果有更多方法，请告诉我。）
1.在child组件中放一个console.log。
2。在设置中使用 Chrome 油漆闪烁选项。
3。使用 React 开发工具
是否所有这些方法都正确地知道组件是否真的重新渲染？因为它似乎无法与 React.memo 一起正常工作。
当我用 React.memo 包装 Child 组件时，当 parent 组件重新呈现时它不会打印 console.log，这是正确的。但仍然使用 chrome 和 React 开发工具突出显示 child 组件，就好像它重新渲染一样。
代码沙箱：https://codesandbox.io/s/bold-cloud-iv0rv
（如果我们添加一辆新车，静态组件仍然以绿色突出显示，但根据备忘录，它不应该重新渲染。）
现在我怀疑，油漆闪烁是否无法正常工作或 React.memo 有问题？
原因
如果使用React.memo，则需要从parent一直到child一直使用到最后。
由于 React.PureComponent 与 React.memo 具有相同的功能，您可以在下面的文档中找到这些解释。
Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”.
结果
通过将parent组件Cars更改为备忘录
// Before
export default Cars;
// After
export default React.memo(Cars);
你会发现 chrome 中的 react-dev-tools 这次只显示 parent 组件 re-rendered 而没有 child [=14= 】 解雇了，没错。 （与之前相比，所有 child 也被突出显示）
结论
console.log和react-dev-tools都很好，您可能只需要按照您的需求以适当的方式实现即可。
假设我们有一个 parent 组件和多个功能 child 组件。我想清楚地知道 parent re-renders 是否执行 child re-renders 。
在浏览了几篇文章后，我了解到有 3 种方法可以检测重新渲染。 （如果有更多方法，请告诉我。）
1.在child组件中放一个console.log。
2。在设置中使用 Chrome 油漆闪烁选项。
3。使用 React 开发工具
是否所有这些方法都正确地知道组件是否真的重新渲染？因为它似乎无法与 React.memo 一起正常工作。
当我用 React.memo 包装 Child 组件时，当 parent 组件重新呈现时它不会打印 console.log，这是正确的。但仍然使用 chrome 和 React 开发工具突出显示 child 组件，就好像它重新渲染一样。
代码沙箱：https://codesandbox.io/s/bold-cloud-iv0rv （如果我们添加一辆新车，静态组件仍然以绿色突出显示，但根据备忘录，它不应该重新渲染。）
现在我怀疑，油漆闪烁是否无法正常工作或 React.memo 有问题？
原因
如果使用React.memo，则需要从parent一直到child一直使用到最后。
由于 React.PureComponent 与 React.memo 具有相同的功能，您可以在下面的文档中找到这些解释。
Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”.
结果
通过将parent组件Cars更改为备忘录
// Before
export default Cars;
// After
export default React.memo(Cars);
你会发现 chrome 中的 react-dev-tools 这次只显示 parent 组件 re-rendered 而没有 child [=14= 】 解雇了，没错。 （与之前相比，所有 child 也被突出显示）
结论
console.log和react-dev-tools都很好，您可能只需要按照您的需求以适当的方式实现即可。