React-redux源碼解析

hover_lew 發(fā)布于2019-08-23 11:58 / 3040人閱讀

摘要：所以一開始應(yīng)該是以默認值傳進去的設(shè)置，能讓子組件拿到相當(dāng)于返回只能有一個子組件和類型驗證通常的做法是我們先通過創(chuàng)建好，然后賦給組件的屬性。在組件內(nèi)部，拿到這個，設(shè)置為屬性，這樣就能讓它的所有組件都能通過拿到。

Provider

   //最后導(dǎo)出的是createProvider()。所以一開始storeKey應(yīng)該是以默認值‘store’傳進去的
   function createProvider(storeKey = "store", subKey) {
   const subscriptionKey = subKey || `${storeKey}Subscription`

   class Provider extends Component {
       //設(shè)置context，能讓子組件拿到store
       //相當(dāng)于返回 {store: this.store}
       getChildContext() {
         return { [storeKey]: this[storeKey], [subscriptionKey]: null }
       }

       constructor(props, context) {
         super(props, context)
         //this.store = props.store
         this[storeKey] = props.store;
       }

       render() {
         //只能有一個子組件
         return Children.only(this.props.children)
       }
   }
   
   //props和context類型驗證
   Provider.propTypes = {
       store: storeShape.isRequired,
       children: PropTypes.element.isRequired,
   }
   Provider.childContextTypes = {

             [storeKey]: storeShape.isRequired,
            [subscriptionKey]: subscriptionShape,
        }
    
            return Provider
    }

通常的做法是我們先通過redux創(chuàng)建好store，然后賦給Provider組件的store屬性。在Provider組件內(nèi)部，拿到這個store，設(shè)置為context屬性，這樣就能讓它的所有組件都能通過context拿到store。

GPU云服務(wù)器云服務(wù)器 react-redux 源碼解析 webrtc源碼解析 webrtc 源碼解析

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97772.html

相關(guān)文章

帶著問題看 react-redux 源碼實現(xiàn)

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

JellyBool 2019-05-22 18:00 評論0 收藏0
dva系列源碼解讀

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

focusj 2019-08-23 18:30 評論0 收藏0
關(guān)于React-redux的Provider, connect的解析

摘要：的實現(xiàn)原理作為一個通用的模塊，主要還是用來應(yīng)用項目中的變更通過做連接，可以在的項目中將兩者結(jié)合的更好。上述便是兩個核心的用法啦。如有不對，還請指正。 react-redux的實現(xiàn)原理： Redux作為一個通用的模塊，主要還是用來應(yīng)用項目中state的變更,通過react-redux做連接，可以在React+Redux的項目中將兩者結(jié)合的更好。 React-redux是一個輕量級的封裝庫...

elva 2019-08-23 14:54 評論0 收藏0
react-redux用法及源碼解讀

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

Zoom 2019-08-23 14:00 評論0 收藏0
[源碼解讀] react-redux

摘要：本文并不逐行地對源碼進行細致分析，不如說是基于以下幾個問題，對源碼進行大致的掃覽。我們已經(jīng)知道，中，允許用戶注冊監(jiān)聽器，這些監(jiān)聽器會在每次執(zhí)行結(jié)束后遍歷觸發(fā)。省略一些無關(guān)代碼其中，是為了在嵌套的中嵌套執(zhí)行。 react-redux 源碼解讀 [TOC] 前置知識閱讀本篇文章前，請先確認你是否了解以下知識： react redux 高階組件 react diff 機制其中高階組件...

Olivia 2019-08-21 11:52 評論0 收藏0