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

Question

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

Answer 1

您可以使用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以及渲染函数之外的提升样式/对象常量和函数声明，因为它们每次都会返回新的引用。

Answer 2

您可以检查https://reactjs.org/docs/perf.html

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

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