React中的Connect實現與原理

一、用法

connect([mapstatetoprops], [mapdispatchtoprops], [mergeprops],[options])

作用：連線react元件與 redux store。

引數說明：

mapstatetoprops(state, ownprops) : stateprops

這個函式允許我們將 store 中的資料作為 props 繫結到元件上。

const mapstatetoprops = (state) =>

}

（1）這個函式的第乙個引數就是 redux 的 store，我們從中摘取了 count 屬性。你不必將 state 中的資料原封不動地傳入元件，可以根據 state 中的資料，動態地輸出元件需要的（最小）屬性。

（2）函式的第二個引數 ownprops，是元件自己的 props。有的時候，ownprops 也會對其產生影響。

當 state 變化，或者 ownprops 變化的時候，mapstatetoprops 都會被呼叫，計算出乙個新的 stateprops，（在與 ownprops merge 後）更新給元件。

mapdispatchtoprops(dispatch, ownprops): dispatchprops

connect 的第二個引數是 mapdispatchtoprops，它的功能是，將 action 作為 props 繫結到元件上，也會成為 mycomp 的 props。

[mergeprops],[options]

不管是 stateprops 還是 dispatchprops，都需要和 ownprops merge 之後才會被賦給元件。connect 的第三個引數就是用來做這件事。通常情況下，你可以不傳這個引數，connect 就會使用 object.assign 替代該方法。

二、實現原理

首先connect之所以會成功，是因為provider元件：

那connect做了些什麼呢？

它真正連線 redux 和 react，它包在我們的容器元件的外一層，它接收上面 provider 提供的 store 裡面的 state 和 dispatch，傳給乙個建構函式，返回乙個物件，以屬性形式傳給我們的容器元件。

關於它的原始碼

connect是乙個高階函式，首先傳入mapstatetoprops、mapdispatchtoprops，然後返回乙個生產component的函式(wrapwithconnect)，然後再將真正的component作為引數傳入wrapwithconnect，這樣就生產出乙個經過包裹的connect元件，該元件具有如下特點:

由於connect的原始碼過長，我們只看主要邏輯：

export default function connect(mapstatetoprops, mapdispatchtoprops, mergeprops, options = {}) 
// 對stateprops、dispatchprops、parentprops進行合併
this.updatestate()
}shouldcomponentupdate(nextprops, nextstate) 
}componentdidmount() )})}
render() 
}connect.contexttypes = 
return connect;
}}

React中的Connect實現與原理

React中的Connect實現與原理

UDP SOCKET程式設計中的connect

qt中的 connect 函式

React中的Connect實現與原理

React中的Connect實現與原理

UDP SOCKET程式設計中的connect

qt中的 connect 函式

相關推薦