connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])連接 React 組件與 Redux store。連接操作不會(huì)改變?cè)瓉?lái)的組件類(lèi)，反而返回一個(gè)新的已與 Redux store 連接的組件類(lèi)。參數(shù)[mapStateToProps(state, [ownProps]): stateProps] (Function): 如果定義該參數(shù)，組件將會(huì)監(jiān)聽(tīng) Redux store 的變化。任何時(shí)候，只要 Redux store 發(fā)生改變，mapStateToProps 函數(shù)就會(huì)被調(diào)用。該回調(diào)函數(shù)必須返回一個(gè)純對(duì)象，這個(gè)對(duì)象會(huì)與組件的 props 合并。如果你省略了這個(gè)參數(shù)，你的組件將不會(huì)監(jiān)聽(tīng) Redux store。如果指定了該回調(diào)函數(shù)中的第二個(gè)參數(shù) ownProps，則該參數(shù)的值為傳遞到組件的 props，而且只要組件接收到新的 props，mapStateToProps 也會(huì)被調(diào)用。[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 如果傳遞的是一個(gè)對(duì)象，那么每個(gè)定義在該對(duì)象的函數(shù)都將被當(dāng)作 Redux action creator，而且這個(gè)對(duì)象會(huì)與 Redux store 綁定在一起，其中所定義的方法名將作為屬性名，合并到組件的 props 中。如果傳遞的是一個(gè)函數(shù)，該函數(shù)將接收一個(gè) dispatch 函數(shù)，然后由你來(lái)決定如何返回一個(gè)對(duì)象，這個(gè)對(duì)象通過(guò) dispatch 函數(shù)與 action creator 以某種方式綁定在一起（提示：你也許會(huì)用到 Redux 的輔助函數(shù)bindActionCreators()）。如果你省略這個(gè) mapDispatchToProps 參數(shù)，默認(rèn)情況下，dispatch 會(huì)注入到你的組件 props 中。如果指定了該回調(diào)函數(shù)中第二個(gè)參數(shù) ownProps，該參數(shù)的值為傳遞到組件的 props，而且只要組件接收到新 props，mapDispatchToProps 也會(huì)被調(diào)用。[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 如果指定了這個(gè)參數(shù)，mapStateToProps() 與 mapDispatchToProps() 的執(zhí)行結(jié)果和組件自身的 props 將傳入到這個(gè)回調(diào)函數(shù)中。該回調(diào)函數(shù)返回的對(duì)象將作為 props 傳遞到被包裝的組件中。你也許可以用這個(gè)回調(diào)函數(shù)，根據(jù)組件的 props 來(lái)篩選部分的 state 數(shù)據(jù)，或者把 props 中的某個(gè)特定變量與 action creator 綁定在一起。如果你省略這個(gè)參數(shù)，默認(rèn)情況下返回 Object.assign({}, ownProps, stateProps, dispatchProps)的結(jié)果。[options] (Object) 如果指定這個(gè)參數(shù)，可以定制 connector 的行為。[pure = true] (Boolean): 如果為 true，connector 將執(zhí)行 shouldComponentUpdate 并且淺對(duì)比mergeProps 的結(jié)果，避免不必要的更新，前提是當(dāng)前組件是一個(gè)“純”組件，它不依賴(lài)于任何的輸入或 state 而只依賴(lài)于 props 和 Redux store 的 state。默認(rèn)值為 true。 [withRef = false] (Boolean): 如果為 true，connector 會(huì)保存一個(gè)對(duì)被包裝組件實(shí)例的引用，該引用通過(guò) getWrappedInstance() 方法獲得。默認(rèn)值為 false 返回值根據(jù)配置信息，返回一個(gè)注入了 state 和 action creator 的 React 組件。靜態(tài)屬性WrappedComponent (Component): 傳遞到 connect() 函數(shù)的原始組件類(lèi)。 靜態(tài)方法組件原來(lái)的靜態(tài)方法都被提升到被包裝的 React 組件。實(shí)例方法getWrappedInstance(): ReactComponent僅當(dāng) connect() 函數(shù)的第四個(gè)參數(shù) options 設(shè)置了 { withRef: true } 才返回被包裝的組件實(shí)例。備注函數(shù)將被調(diào)用兩次。第一次是設(shè)置參數(shù)，第二次是組件與 Redux store 連接：connect(mapStateToProps, mapDispatchToProps, mergeProps)(MyComponent)。connect 函數(shù)不會(huì)修改傳入的 React 組件，返回的是一個(gè)新的已與 Redux store 連接的組件，而且你應(yīng)該使用這個(gè)新組件。mapStateToProps 函數(shù)接收整個(gè) Redux store 的 state 作為 props，然后返回一個(gè)傳入到組件 props 的對(duì)象。該函數(shù)被稱(chēng)之為 selector。參考使用 reselect 高效地組合多個(gè) selector ，并對(duì) 收集到的數(shù)據(jù)進(jìn)行處理。

　　

轉(zhuǎn)載于:https://www.cnblogs.com/leijuan/p/6872759.html

總結(jié)

以上是生活随笔為你收集整理的react connect的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。