[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目的是把傳進...