[源碼解讀] react-redux

Olivia 發布于2019-08-21 11:52 / 3104人閱讀

摘要：本文并不逐行地對源碼進行細致分析，不如說是基于以下幾個問題，對源碼進行大致的掃覽。我們已經知道，中，允許用戶注冊監聽器，這些監聽器會在每次執行結束后遍歷觸發。省略一些無關代碼其中，是為了在嵌套的中嵌套執行。

react-redux 源碼解讀

[TOC]

前置知識

閱讀本篇文章前，請先確認你是否了解以下知識：

react

redux

高階組件

react diff 機制

其中高階組件如果你不太了解也無所謂，你只需要知道，高階組件就是一個工廠函數，它接收一個組件類（或者函數組件），返回一個被修改后的新的組件類。connect 就是一個高階組件。

文章內會使用的簡寫

hoc：高階組件（higher order component）

scu： shouldComponentUpdate

Issues

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

我們把關注點放在：

connect 是通過什么方式來連接 store 的？

怎么分發 state tree 到子組件的？
provider 僅僅只是保持了一個 store 實例，即使 store 中的 state tree 變化了，由于 react diff 階段只做淺比較，僅比較對象引用，故 provider.props.store 被視為未發生變化，那就無法把新的 state tree 分發到子組件了。

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

兩個核心 api

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

Provider

connect

Provider

Provider 的作用僅僅是維護一個 store 實例，并使用 context , 為分發 state tree 提供了機制

connect

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

connect 本身是一個高階組件，它調用了 connectAdvanced 這么一個工廠函數。

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

connectAdvanced

connectAdvanced 是一個高階組件的工廠函數，它返回一個 hoc （高階組件），這個 hoc 最終返回一個 Connect(WrappedComponent) 的組件。

connect 是通過什么方式來連接 store 的？

在這個 Connect(WrappedComponent) 中，聲明了 getChildContext 函數，通過它來獲取到 Provider 中共享的 store 實例。

NOTE ：理論上，Provider 下任何一個子組件，只要我們也去聲明了 getChildContext ，那么它就和 connect 了一樣，可以得到 store 實例了。

connect 怎么分發 state tree 到子組件的？

一句話，主要通過 store.subscribe 接口和組件 props 變更自動 re-render 機制。

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

selector

subscriptions

每個 Connect(WrappedComponent) 在構造函數中都需要 init 上述兩個實體。

selector

selector 主要由 selectorFactory 構造，selector 內部包含

一個計算新 props 的生成函數
sourceSelector(store.getState(), props)
其中 props 是 selector 之前緩存的，后續會直接拿來和 store.getState() 比較引用

一個 shouldComponentUpdate 的標識
在 Connect(WrappedComponent) 內部是直接使用它來判斷 scu 的

shouldComponentUpdate() {
  return this.selector.shouldComponentUpdate
}

源碼如下

const selector = {
    // 實際 run 的邏輯又是在 SelectorFactory 里定義的，這里只是做 scu
    run: function runComponentSelector(props) {
      try {
        const nextProps = sourceSelector(store.getState(), props)
        // connect 的 scu 實際邏輯在這里定義了
        // 比較 run 之后兩次 props 的引用是否仍然保持相等
        if (nextProps !== selector.props || selector.error) {
          selector.shouldComponentUpdate = true
          selector.props = nextProps
          selector.error = null
        }
      } catch (error) {
        selector.shouldComponentUpdate = true
        selector.error = error
      }
    }
  }

調用 selector.run 的時候，主要做了兩件事情

根據之前緩存的 prevProps 和當前 redux store 實例中的 statet tree 生成新的 props。

通過比較引用，更新 shouldComponentUpdate 判斷標識

Connect(WrappedComponent) 會在三處調用 selector.run：

componentDidMount

componentWillReceiveProps

onStateChanged

之后 React 就會自動向子組件分發變更后的 props ，實現 re-render。

subcription

我們在上面提到過 Provider 本身是無法通知 state tree 的變化的，于是為了監聽 state tree 變化，我們需要通過 store.subcribe 接口，來向 Provider 的 store 實例注冊一些監聽器。

我們已經知道，redux 中，store.subcribe 允許用戶注冊監聽器，這些監聽器會在每次 dispatch 執行結束后遍歷觸發。

于是在 react-redux 中， Connect(WrappedComponent) 中的 subcription 最終就是被注冊到 store 中。

initSubscription() {
    // ...省略一些無關代碼
    this.subscription = new Subscription(this.store, parentSub, this.onStateChange.bind(this))
}

其中，

parentSub 是為了在嵌套的 connect 中嵌套執行 subscription。

new Subscription 主要構造了一個包含 trySubscribe 方法的對象

trySubscribe() {
    if (!this.unsubscribe) {
      this.unsubscribe = this.parentSub
        ? this.parentSub.addNestedSub(this.onStateChange)
        : this.store.subscribe(this.onStateChange)

      this.listeners = createListenerCollection()
    }
  }

Connect(WrappedComponent) 在 componentDidMount 時 trySubscribe，在 componentWillUnmount 時 tryUnsubscribe

而 trySubscribe 的主要邏輯就是將 onStateChange 注冊到 redux.store 中。

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

onStateChange() {
  // 得到新的 props 和 state
  this.selector.run(this.props)

  if (!this.selector.shouldComponentUpdate) {
    this.notifyNestedSubs()
  } else {
    this.componentDidUpdate = this.notifyNestedSubsOnComponentDidUpdate
    this.setState(dummyState)
  }
}

于是，每次 state tree 發生變化后，或者更準確地說，每次 dispatch 成功后，redux.store 都會通過注冊好的 subscription，執行 Connect(WrappedComponent) 中的 onStateChange ，再由 selector.run 來判斷是否需要生成新的 props。

云服務器 GPU云服務器源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀 js v8源碼解讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87218.html

react-redux用法及源碼解讀

摘要：帶有內部狀態，內部可以使用。代表監聽的全局，也可以說是全局的，表示該組件自身攜帶的方法。回答問題是通過應用的，將通過頂層組件傳遞到上下文環境中。所有頁面集合緩存不用每次都重新加載通過綁定用法完參考文章 react-redux把組件分為UI組件和容器組件。先看圖下圖： showImg(https://segmentfault.com/img/bVbkVBz?w=1378&h=1194);...

Zoom 2019-08-23 14:00 評論0 收藏0
dva系列源碼解讀

摘要：介紹概述本次對源碼的解讀除了傳統的從入手外還將引入帶入問題讀源碼的理念，因為只有這樣當讀完源碼之后才會有切身的收獲。介紹概述本次對 dva 源碼的解讀除了傳統的從 api 入手外還將引入帶入問題讀源碼的理念，因為只有這樣當讀完源碼之后才會有切身的收獲。另外除了 dva 的源碼外還會解讀一些常用的 dva 插件的源碼。電子書 https://dva-source-docs.net...

focusj 2019-08-23 18:30 評論0 收藏0
Redux系列源碼解讀

摘要：源碼解讀的方法就是給我們提供了靈活的創建符合標準的的方法。用于分解樹，每一個對應的一個對應的子。這樣在將傳遞給時利于分解。源碼實現了這種將函數數組，通過的方法，實現層層嵌套的執行，達到中間件的實現。 Redux 源碼解讀 1.redux-action createAction redux-action的createAction方法就是給我們提供了靈活的創建符合FSA標準的actio...

Scliang 2019-08-20 12:08 評論0 收藏0
帶著問題看 react-redux 源碼實現

摘要：更新類型及具體內容負責更新數據的具體邏輯。即根據當前及攜帶的信息合成新的數據。下面帶著這些問題深入了解本質上也是高階組件的一種實現。核心實現聲明以被子組件獲取。通過的實現，我們可以得到的重要性淺比較的實現由此可以看到的重要性。前言 Redux作為通用的狀態管理器，可以搭配任意界面框架。所以并搭配react使用的話就要借助redux官方提供的React綁定庫react-redux，以高效靈活的...

JellyBool 2019-05-22 18:00 評論0 收藏0
重讀redux源碼(二)

摘要：函數組合，科里化的串聯結合示例源碼，實現也很優雅，對于返回的，將等參數傳遞進去，然后執行，等待回調異步完成再。對于正常對象則進行下一步。前言作為前端狀態管理器，這個比較跨時代的工具庫redux有很多實現和思想值得我們思考。在深入源碼之前，我們可以相關注下一些常見問題，這樣帶著問題去看實現，也能更加清晰的了解。常見問題大概看了下主要有這么幾個： redux三大原則這個可以直接參考...

dingda 2019-05-23 13:54 評論0 收藏0