在 props 更改后重新渲染 React 組件

Question

在 React 文檔中，它說

默認情況下，當您的組件的 state 或 props 發生變化時，您的組件將重新渲染。

我了解狀態更改，但我不確定道具何時更改。 據我所知，道具總是從父組件傳遞給子組件。 當父組件重新渲染時（例如，由於狀態更改），所有子組件也會重新渲染（忽略 shouldComponentUpdate）。 所以在我看來，如果父組件重新渲染，所有子組件都會重新渲染，無論我是否將新的 props 傳遞給它們。 如果我確實將新道具傳遞給子組件，那么子組件重新渲染的事實僅僅是因為父組件正在重新渲染，而不是因為我正在傳遞新的道具。

是否存在父組件將新的 props 傳遞給子組件，導致子組件重新渲染，但又不是簡單的父組件重新渲染導致的場景？

是否有可能看到一個示例，其中組件將重新渲染是因為它接收到新的 props，而不是因為父組件正在重新渲染（或它自己的狀態已更改）？

對不起，如果這是一個基本問題，我是 React 的新手。

編輯：我看到 Redux 可以通過傳遞新的 props 來導致組件重新渲染，我很想知道 Redux 在幕后做了什么來實現這一點。

Answer 1

最后回答你提出的問題：

• 如果子組件是PureComponent或包含在React.memo它只會在 props 更改時重新渲染。 如果父級重新渲染，則組件將比較它收到的道具，如果它們與之前傳遞的道具相同，則不會重新渲染。

• 如果子組件不是PureComponent或包含在React.memo那么它會在父組件重新渲染時重新渲染。

Answer 2

例如，當您將提供程序、HOC 或 Redux 與 mapStateToProps 一起使用時，這些 props 是從其他組件注入 props 更改的。

Answer 3

我對反應並不陌生，並且問了同樣的事情。 有一篇文章對我說得很清楚： https : //thoughtbot.com/blog/react-rendering-misconception

如果需要 DOM 更新，則需要重新渲染以進行差異檢查。 如果您已經實現了 shouldComponentUpdate 或用 memo 包裝（兩者都返回 false），則跳過重新渲染。

如果子組件使用 redux 或上下文連接，那么即使沒有重新渲染父組件，它也可能會重新渲染。

Answer 4

1. redux 的連接中間件類似於訂閱，每個子組件都可以通過訂閱直接連接到 store，並且當 store 發生變化時，store 會嘗試重新同步所有連接的組件。 任何組件的新傳入數據都作為道具出現，導致重新渲染。
2. 任何從其狀態外部更改的組件都只能通過 props 進行，因此它類似於父組件傳遞新數據/redux 存儲將新數據推送到組件。