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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

審核編輯：符乾江