PLC程序解鎖解碼【電；I7I54833762】方法和思路分享，首先是設置 subscription 的 onStateChange（它初始是個空方法，需要注入實現(xiàn)），它會在觸發(fā)更新時調(diào)用，它這里希望將來調(diào)用的是subscription.notifyNestedSubs，subscription.notifyNestedSubs會觸發(fā)這個 subscription 收集的所有子訂閱。也就是說這里的更新回調(diào)和『更新』沒有直接關(guān)系，而是觸發(fā)子節(jié)點們的更新方法。

然后調(diào)用了subscription.trySubscribe()，它會將自己的 onStateChange 交給父級 subscription 或者 redux 去訂閱，將來由它們觸發(fā) onStateChange

最后它會判斷之前的 state 和最新的是否一致，如果不一致會調(diào)用subscription.notifyNestedSubs()，它會觸發(fā)這個 subscription 收集的所有子訂閱從而更新它們。

返回了注銷相關(guān)的函數(shù)，它會注銷在父級的訂閱，將subscription.onStateChange重新置為空方法。這個函數(shù)會在組件卸載或 re-render （僅 store 變化時）時被調(diào)用（react useEffect 的特性）。

Provider 有很多地方都涉及到了 subscription，subscription 的那些方法只是講了大概功能，關(guān)于 subscription 的細節(jié)會在后面 subscription 的部分講到。

這里會講到 Provider 中出鏡率很高的 subscription 部分，它是 react-redux 能夠嵌套收集訂閱的關(guān)鍵。其實這個部分的標題叫做 Subscription 已經(jīng)不太合適了，在 8.0.0 版本之前，react-redux 確實是通過 Subscription class 實現(xiàn)它的，你可以通過new Subscription()使用創(chuàng)建 subscription 實例。但在 8.0.0 之后，已經(jīng)變成了createSubscription函數(shù)創(chuàng)建 subscription 對象，內(nèi)部用閉包替代原先的屬性。

用函數(shù)替代 class 有一個好處是，不需要關(guān)心 this 的指向，函數(shù)返回的方法修改的永遠是內(nèi)部的閉包，不會出現(xiàn) class 方法被賦值給其他變量后出現(xiàn) this 指向變化的問題，降低了開發(fā)時的心智負擔。閉包也更加私有化，增加了變量安全。同時在一個支持 hooks 的庫里，用函數(shù)實現(xiàn)也更符合開發(fā)范式。

addNestedSub非常巧妙的運用了遞歸，它里面又調(diào)用了trySubscribe。于是它們就會達到這樣的目的，當最底層subscription發(fā)起trySubscribe想被父級收集訂閱時，它會首先觸發(fā)父級的trySubscribe并繼續(xù)遞歸直到根subscription，如果我們把這樣的層級結(jié)構(gòu)想象成樹的話（其實 subscription.trySubscribe 也確實發(fā)生在組件樹中），那么就相當于從根節(jié)點到葉子節(jié)點依次會被父級收集訂閱。因為這是由葉子節(jié)點先發(fā)起的，這時除了葉子節(jié)點，其他節(jié)點的訂閱回調(diào)還沒有被設置，所以才設計了handleChangeWrapper這個回調(diào)外殼，注冊的只是這個回調(diào)外殼，在將來非葉子節(jié)點設置好回調(diào)后，能被外殼觸發(fā)。

在『遞』過程結(jié)束后，從根節(jié)點開始到這個葉子節(jié)點的訂閱回調(diào)handleChangeWrapper都正在被父級收集了，『歸』的過程回溯做它的本職工作return listeners.subscribe(listener)，將子subscription的訂閱回調(diào)收集到收集器listeners中（將來更新發(fā)生時會觸發(fā)相關(guān)的handleChangeWrapper，而它會間接的調(diào)用收集到所有的 listener）。

所以每個subscription的addNestedSub都做了兩件事：1. 讓自己的訂閱回調(diào)先被父級收集；2. 收集子subscription的訂閱回調(diào)。

結(jié)合addNestedSub的解釋再回過頭來看trySubscribe，它想讓自己的訂閱回調(diào)被父級收集，于是當它被傳入父級subscription時，就會調(diào)用它的addNestedSub，這會導致從根subscription開始每一層subscription都被父級收集了回調(diào)，于是每個subscription都嵌套收集了它們子subscription，從而父級更新后子級才更新成為了可能。同時，因為unsubscribe這個鎖的存在，如果某個父級subscription的trySubscribe被調(diào)用了，并不會重復的觸發(fā)這個『嵌套注冊』。

useIsomorphicLayoutEffectWithArgs是一個工具函數(shù)，內(nèi)部是useIsomorphicLayoutEffect，這個函數(shù)前面也講過。它們最終做的是：將第 2 個數(shù)組參數(shù)的每項作為參數(shù)給第一個參數(shù)調(diào)用，第 3 個參數(shù)是useIsomorphicLayoutEffect的緩存依賴。

被執(zhí)行的第一個參數(shù)captureWrapperProps，它主要功能是判斷如果是來自 store 的更新，則在更新完成后（比如 useEffect）觸發(fā)subscription.notifyNestedSubs，通知子訂閱更新。

接著它想生成actualChildProps，也就是 select 出來的業(yè)務組件需要的 props，其中主要使用了useSyncExternalStore，如果你追到useSyncExternalStore的代碼里看，會發(fā)現(xiàn)它是一個空方法，直接調(diào)用會拋出錯誤，所以它是由外部注入的。在入口index.ts里，initializeConnect(useSyncExternalStore)對它進行初始化了，useSyncExternalStore來自 React 。所以actualChildProps實際是React.useSyncExternalStore( subscribeForReact, actualChildPropsSelector, getServerState ? () => childPropsSelector(getServerState(), wrapperProps) : actualChildPropsSelector)的結(jié)果。

useSyncExternalStore是 react18 的新 API，前身是useMutableSource，為了防止在 concurrent 模式下，任務中斷后第三方 store 被修改，恢復任務時出現(xiàn)tearing從而數(shù)據(jù)不一致。外部 store 的更新可以通過它引起組件的更新。在react-redux8之前，是由useReducer手動實現(xiàn)的，這是react-redux8首次使用新 API。這也意味著你必須跟著使用 React18+。但我認為其實 react-redux8 可以用 shim: import { useSyncExternalStore } from 'use-syncexternal-store/shim';來做到向下兼容。

審核編輯：符乾江