組件

React-Redux將所有組件分為兩大類：展示組件（UI組件），容器組件

展示組件有以下幾個(gè)特征：

• 只負(fù)責(zé) UI 的呈現(xiàn)，不帶有任何業(yè)務(wù)邏輯
• 沒(méi)有狀態(tài)（即不使用this.state這個(gè)變量）
• 所有數(shù)據(jù)都由參數(shù)（this.props）提供
• 不使用任何 Redux 的 API
  

容器組件有以下幾個(gè)特征：

• 負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé) UI 的呈現(xiàn)
• 帶有內(nèi)部狀態(tài)
• 使用 Redux 的 API

總結(jié)為一點(diǎn)： 展示組件負(fù)責(zé) UI 的呈現(xiàn)，容器組件負(fù)責(zé)管理數(shù)據(jù)和邏輯

connect方法解析

下圖是connect()的概念圖

可以簡(jiǎn)單歸納為以下幾點(diǎn)：

• mapStateToProps必須是function,作為輸入邏輯，
• mapDispatchToProps可以是funciton,也可以是對(duì)象，作為輸出，
  

connect（）簽名

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

連接 React 組件與 Redux store。

連接操作不會(huì)改變?cè)瓉?lái)的組件類，反而返回一個(gè)新的已與 Redux store 連接的組件類。

參數(shù)

1、 [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)用。

2、 [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)用。

3、 [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é)果。

4、 [options] (Object)  如果指定這個(gè)參數(shù)，可以定制 connector 的行為。

[pure = true] (Boolean) : 如果為 true，connector 將執(zhí)行 shouldComponentUpdate 并且淺對(duì)比 mergeProps 的結(jié)果，避免不必要的更新，前提是當(dāng)前組件是一個(gè)“純”組件，它不依賴于任何的輸入或 state 而只依賴于 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 組件。

容器組件使用 connect() 方法連接 Redux

我們用 react-redux 提供的 connect() 方法將“笨拙”的 Counter 轉(zhuǎn)化成容器組件。connect() 允許你從 Redux store 中指定準(zhǔn)確的 state 到你想要獲取的組件中。這讓你能獲取到任何級(jí)別顆粒度的數(shù)據(jù)。

讓我們看下，我們擁有一個(gè) 的展示組件，它有一個(gè)通過(guò) props 傳過(guò)來(lái)的值，和一個(gè)函數(shù) onIncrement，當(dāng)你點(diǎn)擊 “Increment” 按鈕時(shí)就會(huì)調(diào)用這個(gè)函數(shù)：

import { Component } from 'react';

export default class Counter extends Component {
 render() {
 return (
  <button onClick={this.props.onIncrement}>
  {this.props.value}
  </button>
 );
 }
}

containers/CounterContainer.js

import { Component } from 'react';
import { connect } from 'react-redux';

import Counter from '../components/Counter';
import { increment } from '../actionsCreators';

// 哪些 Redux 全局的 state 是我們組件想要通過(guò) props 獲取的？
function mapStateToProps(state) {
 return {
 value: state.counter
 };
}

// 哪些 action 創(chuàng)建函數(shù)是我們想要通過(guò) props 獲取的？
function mapDispatchToProps(dispatch) {
 return {
 onIncrement: () => dispatch(increment())
 };
}

export default connect(
 mapStateToProps,
 mapDispatchToProps
)(Counter);

總結(jié)

connect后面第二個(gè)括號(hào)是要添加prop的react組件，第一個(gè)括號(hào)中的參數(shù)是用來(lái)改變?cè)摻M件prop的方法，第一個(gè)括號(hào)有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)函數(shù)，返回一個(gè)對(duì)象，對(duì)象的鍵是該組件的prop屬性，值是該prop的值；第二個(gè)參數(shù)也是一個(gè)函數(shù)，返回一個(gè)對(duì)象，對(duì)象的鍵同樣是prop的屬性名，值是一個(gè)redux的dispatch，當(dāng)這個(gè)prop屬性被用于觸發(fā)時(shí)，dispatch會(huì)改變r(jià)edux中state的值。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論