ReactJS：我如何监控重新渲染过程？

Question

3

有没有办法跟踪正在重新渲染的React组件?

例如，我正在调用API，在回复后更改一些父组件的状态，因此所有子组件也会被重新渲染（我对此理解正确吗？）。

如何监视哪个父组件启动了重新渲染过程以及由此呈现了哪些子组件（每个组件重新呈现了多少次）？

我知道我可以在每个组件中注入某种类型的console.log模式，然后仅监视浏览器控制台，但我正在寻找更复杂的解决方案。

- mpoureki

1

你看过React开发者工具浏览器插件吗？你可以直接观察组件的变化。 - Dan Prince

我确实有React开发工具，但我从未注意到Trace React Updates功能！它是我正在寻找的视觉等效物！唯一的问题是，当您试图获得正在更新的内容的概要时，它的工作效果非常好，但如果组件错误地更新两次，则很难注意到。 - mpoureki

事实证明，开发工具的视觉指示会根据元素连续渲染之间的时间跨度而改变颜色。时间跨度越小，颜色就会变得更“热”。尽管如此，我们仍然可以更好地利用日志，而不仅仅是视觉指示。 - mpoureki

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Héctor · Answer 1

你可以从在 componentWillUpdate() 生命周期方法中记录新状态或属性开始，该方法将在每次渲染之前立即调用（除了第一次）。