我正在做一些事情,我的一段代码有点慢,我认为发生的事情是组件无缘无故地重新渲染了太多次。有没有办法检查一个组件在react(或者react-native)中重新渲染的次数?我尝试做的是在render方法后面放一个console.log,并计算有多少个,但我不确定这是否可行。先谢谢你了!
console.log
nukf8bse1#
你可以把console.count('counter')放在你的渲染函数中来检查这个。在这里您可以找到关于console.countlink的所有详细信息
console.count('counter')
dsekswqp2#
console.log将工作,如果你把它放在你的渲染函数中。如果您担心组件重新渲染太多次,请尝试扩展React.PureComponent。关于PureComponent的信息可以在React的文档中找到。您还可以查看shouldComponentUpdate方法,看看它是否有助于解决重新呈现问题。关于这一点的信息也在他们的文档中。祝你好运!
React.PureComponent
PureComponent
shouldComponentUpdate
ttvkxqim3#
使用这个小工具比将console.log放在每个组件中更好https://github.com/maicki/why-did-you-update每次不必要地重新渲染组件时,控制台都会警告您(例如props nor state didn't change)即使它不再维护它的工作完美。最好的问候
qnakjoqk4#
最简单的渲染计数方法是使用console.log,如下所示:
let counter = 0; const Component = () => { console.log('counting re-renders', (counter += 1)); return ( <> </> ) }
4条答案
按热度按时间nukf8bse1#
你可以把
console.count('counter')
放在你的渲染函数中来检查这个。在这里您可以找到关于console.countlink的所有详细信息dsekswqp2#
console.log
将工作,如果你把它放在你的渲染函数中。如果您担心组件重新渲染太多次,请尝试扩展React.PureComponent
。关于PureComponent
的信息可以在React的文档中找到。您还可以查看shouldComponentUpdate
方法,看看它是否有助于解决重新呈现问题。关于这一点的信息也在他们的文档中。祝你好运!ttvkxqim3#
使用这个小工具比将
console.log
放在每个组件中更好https://github.com/maicki/why-did-you-update
每次不必要地重新渲染组件时,控制台都会警告您(例如props nor state didn't change)
即使它不再维护它的工作完美。
最好的问候
qnakjoqk4#
最简单的渲染计数方法是使用
console.log
,如下所示: