如何检查组件中的渲染浪费

时间:2019-04-15 08:44:20

标签: javascript reactjs

我正在尝试调试React应用中的性能问题,可以使用任何方法或'devtools'或任何方法来检查组件的性能以防止浪费的渲染失败

2 个答案:

答案 0 :(得分:3)

您可以使用https://github.com/welldone-software/why-did-you-render,它是最新的Why-Did-You-Update(https://github.com/maicki/why-did-you-update)版本,每当发生不必要的重新渲染时,它将在控制台中打印警告。在您的组件之一中。

为防止不必要的渲染而进行的常见优化包括使用PureComponent而不是Component,或对函数组件使用React.memo,以及渲染函数之外的提升样式/对象常量和函数声明,因为它们返回了新的引用每次。

答案 1 :(得分:0)

您可以选中https://reactjs.org/docs/perf.html

具体看看printwasted https://reactjs.org/docs/perf.html#printwasted

  

“浪费”的时间花费在实际上没有渲染的组件上   任何东西,例如渲染保持不变,因此未触及DOM