簡體   English   中英

當子組件的父組件重新渲染時,使用`react-redux`的子組件的行為如何變化?

[英]How does the behavior of a child component using `react-redux` change when its parent rerenders?

react-redux的hooks文檔中,我們警告useSelector “不會因為父組件的重新渲染而阻止組件重新渲染,即使組件的props不變,也不像connect那樣。”

這對我來說是新聞。 在正常子組件不會重新渲染的情況下, connect是否connect防止重新渲染? 更具體地說,我要問的是以下三種情況在父組件重新渲染而商店和道具保持不變的情況下在以下三種情況下的重新渲染行為的差異:

  1. 子組件包裝在connect HOC中。
  2. 行為為1.,但是將注入狀態重構為useSelector
  3. 與2.一樣,但是useSelector和所有依賴於它的東西都被刪除了。

connect始終像是React的PureComponent的更復雜的版本。 具體來說,當渲染連接的組件的父組件時,如果新的“合並的道具”已從以前更改過,則connect僅會重新渲染子組件,其中const mergeProps = { ...ownProps, ...stateProps, ...dispatchProps }

因此,如果父組件正在傳遞與以前相同的道具,則connect包裝器將防止重新渲染被包裝的組件。

使用鈎子時,沒有包裝器組件阻止該組件在其父對象傳遞相同的道具時重新渲染。 您需要將組件包裝在React.memo()才能實現。 而且,實際上,這正是版本7中實現connect本身的方式。

(來源:我是Redux的維護者,並編寫了React-Redux v7。)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM