IT技术 - 如何正确检测 React JS 中的重新渲染？ - 吾爱随笔录

IT技术 javascript reactjs rerender virtual-dom react-devtools

2021-03-24 04:28:05

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

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

1.console.log在子组件中放置一个。

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

3. 使用 React 开发工具

所有这些方法是否正确知道组件是否真的重新渲染？因为它似乎无法与 React.memo 一起正常工作。

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

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

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

1个回答

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

由于React.PureComponent与共享相同的功能React.memo，您可以在下面的文档中找到这些说明。

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

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

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

你会发现react-dev-toolsin chrome 只会显示这次重新渲染的父组件以及没有子组件console.log被触发，这是正确的。（与之前相比，所有的孩子也得到了突出显示）

前

后

双方console.log并react-dev-tools运作良好，你可能只需要以适当的方式来实现以下您的需求。

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

2021-06-12 04:28:05

其它你可能感兴趣的问题