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

a0x5cqrl  于 2023-06-24  发布在  React
关注(0)|答案(4)|浏览(278)

我正在做一些事情,我的一段代码有点慢,我认为发生的事情是组件无缘无故地重新渲染了太多次。有没有办法检查一个组件在react(或者react-native)中重新渲染的次数?我尝试做的是在render方法后面放一个console.log,并计算有多少个,但我不确定这是否可行。先谢谢你了!

nukf8bse

nukf8bse1#

你可以把console.count('counter')放在你的渲染函数中来检查这个。在这里您可以找到关于console.countlink的所有详细信息

dsekswqp

dsekswqp2#

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

ttvkxqim

ttvkxqim3#

使用这个小工具比将console.log放在每个组件中更好
https://github.com/maicki/why-did-you-update
每次不必要地重新渲染组件时,控制台都会警告您(例如props nor state didn't change)
即使它不再维护它的工作完美。
最好的问候

qnakjoqk

qnakjoqk4#

最简单的渲染计数方法是使用console.log,如下所示:

let counter = 0;

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

相关问题