為什么 React 組件會渲染？

Question

我有一個相當復雜的 React 應用程序。 我面臨的問題是，當在導航欄中單擊鏈接時，導航欄會重新呈現。 顯然，這表明應用程序正在進行不必要的渲染。 導航欄存在於“標題”組件中。 這個“標題”應該是固定的。 但它被多次調用。 告訴組件為什么呈現的推薦方法是什么。 我可以想到很多原因，我想開始消除它們以減少不必要的渲染。 該組件可以是

• 更改內部 state（通過 useState）
• 使用效果
• 通過 useSelect 訂閱了“外部”state
• 有道具改變

可能還有其他人。 我如何知道組件為何呈現？

Answer 1

（顯然）沒有簡單的方法來說明組件為何呈現，可能是因為它本質上需要深度比較（至少要涵蓋所有情況），這可能是一項昂貴的操作。

但是有很多工具和解決方法。

• 使用React 開發工具（有幫助，但不顯示渲染的原因）
• 臨時添加一個 useEffect 來觀察特定值
• 編寫一個可以同時觀察幾個特定值的鈎子
• 安裝一些節點 package
• 查看trace-why-a-react-component-is-re-rendering