React 检查组件重新渲染的次数

Question

我正在做一些事情，我的一段代码有点慢，我认为发生的事情是组件无缘无故地重新渲染了太多次。有什么方法可以检查组件在 react（或 react-native）中重新渲染多少次？我试图做的是console.log在渲染方法之后放置一个并计算有多少，但我不确定这是否有效。提前致谢！

Answer 1

console.log将工作，如果你把它放在你的渲染函数中。如果您担心组件重新渲染太多次，请尝试扩展React.PureComponent. 有关信息PureComponent可以在React 的文档中找到。您还可以查看该shouldComponentUpdate方法，看看这是否有助于解决您的重新渲染问题。有关这方面的信息也在他们的文档中。祝你好运！

Answer 2

比放入console.log每个组件更好的是使用这个小工具

https://github.com/maicki/why-did-you-update

每次不必要地重新渲染组件时，您都会在控制台中收到警告（例如，道具或状态确实发生了变化）

即使它不再维护，它也能完美运行。

此致

Answer 3

您可以放置console.count('counter')在渲染函数中来检查这一点。在这里您可以找到有关console.count 链接的所有详细信息