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...