如何檢查組件中的渲染浪費

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沒有被觸及