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

Question

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

Answer 1

You can use https://github.com/welldone-software/why-did-you-render , its a more maintained up to date version of why-did-you-update ( https://github.com/maicki/why-did-you-update ) , it will print warnings in your console whenever an unnecessary re-render happens in one of your components.

Common optimisations you can do to prevent unnecessary renders include using PureComponent instead of Component, or use React.memo for function components, as well as hoist styles/object literals and function declarations outside of your render functions as they return a new reference every time.

Answer 2

You can check https://reactjs.org/docs/perf.html

Specifically take a look on printwasted https://reactjs.org/docs/perf.html#printwasted

“Wasted” time is spent on components that didn't actually render anything, eg the render stayed the same, so the DOM wasn't touched