React 什么時候重新渲染子組件？

Question

我知道 React 在 state 或道具更改時（或當我們強制組件重新渲染時）執行重新渲染。 我也知道 React 在重新渲染時會重新渲染組件的子組件。

我注意到 React 會重新渲染子組件，即使它的道具（子道具）沒有改變，所以當父組件傳遞與以前相同的道具時。

這是為什么？ React 是否會重新渲染完全無狀態且無屬性的子組件？

Answer 1

如果您不希望子組件重新渲染，您應該使用React.memo 、 PureComponent或shouldComponentUpdate生命周期鈎子。

這三個選項中的每一個都告訴 React，如果你的組件（道具）的輸入沒有改變，那么重新渲染組件是沒有意義的，因為組件不會改變。

如果您正在使用 class 組件，那么 PureComponent 或 shouldComponentUpdate 應該是您的首選。 本質上，PureComponent 只是為您實現了 shouldComponentUpdate。

React.memo 應該是你使用 function 組件時的首選。 React.memo 有第二個參數用於 function 以確定相等性，其作用類似於 shouldComponentUpdate。

在使用 React 組件時，您絕對應該使用這三個選項之一而不是重新選擇。 重新選擇用於記憶 redux 中的選擇器（或只是一般的 function 調用）。 它不適用於記憶反應組件。

我通常使用 reselect 來使組件的 props 穩定（使用 connect 時）並防止在每次渲染時重新計算復雜的數據。

Answer 2

為什么 React 默認這樣做是因為它不知道在 state 相同時不重新渲染，除非您在這些組件上使用 package 的記憶，例如重新選擇。

重新選擇可以幫助您僅在傳遞的 state 與當前不同時重新渲染組件。