原始碼解讀 react redux

2021-09-16 19:50:48 字數 1804 閱讀 9352

[toc]

其中高階元件如果你不太了解也無所謂,你只需要知道,高階元件就是乙個工廠函式,它接收乙個元件類(或者函式元件),返回乙個被修改後的新的元件類。connect就是乙個高階元件。

文章內會使用的簡寫

我們知道,react-redux 為開發者提供了 redux 到 react 的 binding。本文並不逐行地對原始碼進行細緻分析,不如說是基於以下幾個問題,對原始碼進行大致的掃覽。

我們把關注點放在:

我們知道 connect 還接收若干配置函式,用來mapxxtoprops,以及設定是否進行pure優化等。這些沒什麼意思,我們就不 care 了。

react-redux 只有兩個核心的部分

provider的作用僅僅是維護乙個store例項,並使用context, 為分發 state tree 提供了機制

connect顧名思義,連線 container 和 store ,使得 container 能響應 state tree 的變化。

connect本身是乙個高階元件,它呼叫了connectadvanced這麼乙個工廠函式。

而上面提到的兩個問題,全都由connectadvanced封裝了。

note: 理論上,provider 下任何乙個子元件,只要我們也去宣告了getchildcontext,那麼它就和connect了一樣,可以得到 store 例項了。

一句話,主要通過store.subscribe介面和元件 props 變更自動 re-render 機制。

在 react-redux 中,我們定義了這麼幾個東西,幫助我們來做到上面幾件事情。

selector主要由selecto***ctory構造,selector內部包含

shouldcomponentupdate()
原始碼如下

const selector = 

} catch (error)

}}

呼叫selector.run的時候,主要做了兩件事情

之後 react 就會自動向子元件分發變更後的 props ,實現 re-render。

我們在上面提到過 provider 本身是無法通知 state tree 的變化的,於是為了監聽 state tree 變化,我們需要通過 store.subcribe 介面,來向 provider 的 store 例項註冊一些***。

我們已經知道,redux 中,store.subcribe 允許使用者註冊***,這些***會在每次 dispatch 執行結束後遍歷觸發。

initsubscription()
其中,

trysubscribe() 

}

而 trysubscribe 的主要邏輯就是將onstatechange註冊到 redux.store 中。

而我們已經說過,onstatechange 主要就是執行selector.run

onstatechange()  else 

}

React Redux 原始碼解析

一般而言,我檢視乙個庫的源 首先回檢視對應方法的引數,其次是對應的return,然後再看 的具體實現。通過檢視原始碼,發現createstore方法返回了乙個物件,該物件共暴露出了五個方法,四個常用的方法 return 複製 複製 檢視原始碼的開始部分,我們發現createstore可以傳入兩個三個...

react redux 原始碼學習

function createstate reducer dispatch 然後將 我們要用到的 getstate,dispatch,subscribe 給暴露出去 return 這裡是使用了 react 的 上下文內容,不贅述 export class provide extends compon...

react redux原始碼解析

react redux原始碼 1.provider 把基於屬性傳遞進來的store掛載到上下文上 2.connect provider建立乙個元件 並把store掛載到上下文中供後代使用 connect 第乙個執行返回是乙個函式 第二個執行返回是乙個元件 元件 proxy 渲染proxy目的是把傳進...