react redux connect原始碼理解

2021-09-29 10:00:22 字數 4185 閱讀 7723

// match函式基本技術介紹 (dispatch, options) => (nextstate, nextownprops) => nextfinalprops


function


connect


( mapstatetoprops,


mapdispatchtoprops,


mergeprops,=)
可以看到的是在connect函式中初始化處理了入參mapstatetoprops，mapdispatchtoprops，mergeprops，讓他們符合初始化函式的形式

(dispatch, options)


=>


(nextstate, nextownprops)


=> nextfinalprops
處理入參之後就返回了乙個react 高階元件（hoc）connecthoc

import hoiststatics from


'hoist-non-react-statics'


// 複製子元件資訊到父元件


import invariant from


'invariant'


// 輸出錯誤資訊


import


from


'react'


import


from


'react-is'


// 判斷是否是react元素的方法


import subscription from


'../utils/subscription'


// 實現發布訂閱的類函式


import


from


'../utils/proptypes'


// store的型別和subscription的型別


let hotreloadin**ersion =


0// 過載版本


const dummystate =


// 假的state？


function


noop()


// 預設函式


// 通過store和合併之後的selector計算得到最終的props


function


makeselectorstateful


(sourceselector, store)


}catch


(error)}


}return selector


}export


default


function


connectadvanced


( selecto***ctory,


// 合併connect selector引數(mapstate,mapdispath,mergeprops)的乙個方法)`,


methodname =


'connectadvanced'


, rendercountprop = undefined,


// 渲染技術


shouldhandlestatechanges =


true


,// 狀態改變時是否更新


// the key of props/context to get the store


storekey =


'store'


,// 關鍵key: store, 用於連線redux


withref =


false


,...connectoptions


}=)const childcontexttypes =


return


function


wrapwithconnect


. instead received $`)||


'component'


const displayname =


getdisplayname


const selecto***ctoryoptions =


class


connect


extends


component


this


.rendercount =


0// 渲染次數


// 獲取redux store，優先從父元件獲取。正常情況下，connect的元件最好不要傳key為store的props


this


.store = props[storekey]


|| context[storekey]


// 判斷是不是父元件就有store，是不是父元件模式


this


.propsmode =


boolean


(props[storekey]


)this


this


bind


(this


)invariant


(this


.store,


`could not find "


$" in either the context or props of `


+`"$". either wrap the root component in a , `


+`or explicitly pass "


$" as a prop to "


$".`


)// 初始化selector


this


.initselector()


// 初始化發布訂閱的模型


this


.initsubscription()


}// 宣告react樹節點下方元件可獲取的context


getchildcontext()


}initselector()


initsubscription()


// 訂閱store更新函式


onstatechange()


else


}// 元件建立後更新props相關


componentdidmount()


// 接受新的props更新


componentwillreceiveprops


(nextprops)


// 判斷是否更新


shouldcomponentupdate()


// 解除安裝函式


componentwillunmount()


()in the options argument of the 


$() call.`


)return


this


}(ref)


notifynestedsubsoncomponentdidupdate()


issubscribed()


// 一些特殊情況處理，withref, rendercountprop，this.propsmode為true並。。。


addextraprops


(props)


if(withref) withextras.ref =


this


if(rendercountprop) withextras[rendercountprop]


=this


.rendercount++if(


this


.propsmode &&


this


.subscription) withextras[subscriptionkey]


=this


.subscription


return withextras


}// 渲染函式


render()


else}}


/* eslint-enable react/no-deprecated */


connect.displayname = displayname


connect.childcontexttypes = childcontexttypes


connect.contexttypes = contexttypes


connect.proptypes = contexttypes


if(process.env.


node_env


!=='production'


)this


.initsubscription()


if(shouldhandlestatechanges)}}


}return


hoiststatics


}}
未完待續~

Java集合 LinkedList原始碼理解筆記

1.內部類node節點，item儲存資料內容，next prev儲存前後節點，形成鍊錶。private static class node 2.first last屬性字段儲存開始節點和結束節點。pointer to first node.invariant first null last null...

SpringMvc原始碼（二） 處理請求過程

過程 1.請求首先進入到frameworkservlet的processrequest中。2.呼叫dispatcherservlet中的doservice方法，對請求進行預設定，doservice方法在frameworkservlet為抽象方法。3.最後呼叫dispatcherservlet的dod...

SpringMvc原始碼（二） 處理請求過程

過程 1.請求首先進入到frameworkservlet的processrequest中。2.呼叫dispatcherservlet中的doservice方法，對請求進行預設定，doservice方法在frameworkservlet為抽象方法。3.最後呼叫dispatcherservlet的dod...