反应检查组件重新渲染的次数

Question

我正在做一些事情，我的一段代码有点慢，我认为发生的事情是组件无缘无故地重新渲染了太多次。有没有办法检查组件在反应中重新渲染了多少次(或反应原生(？我试图做的是在渲染方法之后放一个console.log并计算有多少，但我不确定这是否有效。提前感谢！

Answer 1

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

Answer 2

console.log将

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

Answer 3

比在每个组件中放入console.log更好的是使用这个小实用程序

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

每次组件不必要地重新渲染时，您都会在控制台中收到警告(例如，道具和状态没有更改(

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

此致敬意

Answer 4

计算渲染的最简单方法是使用如下console.log：

let counter = 0;
const Component = () => {
    
console.log('counting re-renders', (counter += 1));
    
    return (
     <> 
     </>
   ) 
}