React-Redux 總結

來源:互聯網
上載者:User

標籤:todo   首次載入   child   stop   ==   必須   active   imp   component   

一、定義與功能

React-Redux 將所有組件分成兩大類:UI 組件(presentational component)和容器組件(container component)

1、UI 組件特徵:

  • 只負責 UI 的呈現,不帶有任何商務邏輯
  • 沒有狀態(即不使用this.state這個變數)
  • 所有資料都由參數(this.props)提供
  • 不使用任何 Redux 的 API

2、容器組件特徵:

  • 負責管理資料和商務邏輯,不負責 UI 的呈現
  • 帶有內部狀態
  • 使用 Redux 的 API

總結:

  UI 組件負責 UI 的呈現,容器組件負責管理資料和邏輯。

  React-Redux 規定,所有的 UI 組件都由使用者提供,容器組件則是由 React-Redux 自動產生。也就是說,使用者負責視覺層,狀態管理則是全部交給它。

二、使用與方法

1、connect方法  輸入UI組件, 輸出容器組件

React-Redux 提供connect方法,用於從 UI 組件產生容器組件。

// TodoList-> UI組件; VisibleTodoList -> 容器組件// mapStatetoProps,mapDispatchToProps -> 它們定義了 UI 組件的商務邏輯。// mapStatetoProps 可省略,若省略,UI 組件就不會訂閱Store,就是說 Store 的更新不會引起 UI 組件的更新import { connect } from ‘react-redux‘const VisibleTodoList = connect(mapStatetoProps, mapDispatchToProps)(TodoList); 

(1)  mapStateToProps(state [,props]) 負責輸入邏輯,即將state映射到 UI 組件的參數(props

state: 必選,state對象;props: 可選,代表容器組件的props對象
mapStateToProps會訂閱 Store,每當state更新的時候,就會自動執行,重新計算 UI 組件的參數(props),從而觸發 UI 組件的重新渲染。

// map Redux state to component props (把 Redux state 映射到 component props)const mapStatetoProps = (state) => {   return {num: state}}// 使用ownProps作為參數後,若容器組件的參數(ownProps)發生變化,也會引發 UI 組件重新渲染const mapStateToProps = (state, ownProps) => {  return {    active: ownProps.filter === state.visibilityFilter  }}

(2) mapDispatchToProps 負責輸出邏輯,即將使用者對 UI 組件的操作映射成 Action。

// map Redux actions to component props (把 Redux actions 映射到 component props)const mapDispatchToProps = dispatch => {  return {    onIncreaseClick: () => dispatch(increaseAction)  };}

mapDispatchToProps 分為兩種類型:函數和對象

mapDispatchToProps是一個函數,會得到dispatchownProps(容器組件的props對象)兩個參數。

mapDispatchToProps作為函數,應該返回一個對象,該對象的每個索引值對都是一個映射,定義了 UI 組件的參數怎樣發出 Action

const mapDispatchToProps = (  dispatch,  ownProps) => {  return {    onClick: () => {      dispatch({        type: ‘SET_VISIBILITY_FILTER‘,        filter: ownProps.filter      });    }  };}

 

mapDispatchToProps是一個對象,鍵名是對應 UI 組件的同名參數,索引值應該是一個函數,會被當作 Action creator ,返回的 Action 會由 Redux 自動發出

const mapDispatchToProps = {  onClick: (filter) => {    type: ‘SET_VISIBILITY_FILTER‘,    filter: filter  };}

  三、原理與流程

為了讓子組件能夠獲得context屬性,React強制要求根組件(此處為Provider組件)提供getChildContext執行個體方法,以及類屬性childContextTypes。而子組件想要擷取context,也必須定義類層級的Counter. contextTypes屬性。定義是雙向的,如果缺少了任何一塊,子組件都擷取不到context屬性。

我認為父組件的那塊定義是在Provider的代碼中實現的,而子組件的那部分是在connect方法中實現的。

因此connect方法為Counter組件添加的context屬性實質上是由Provider傳下來的,這樣在mapStatesToProps方法裡的state參數實質上就是this.context.store.getState()方法獲得的。

頁面首次載入以及之後有互動行為之後整個邏輯的流程:

(1)頁面首次載入時,store裡的初始state擷取過程:
createStore(reducers,defaultParams)的調用,其中reducers可以使一個reducer,也可是redux.combineReducers過的reducer的集合。

createStore方法會對每個reducer去dispatch一個[email protected]@redux/INIT類型的action,而這個action一般在reducer的代碼裡不會被handle,直接掉入default塊,於是就返回了state的初始狀態。

然後一般就會ReactDom.render()將應用渲染出來,每個子組件的容器組件通過傳入this.context.store.getState()方法獲得的state對象, 以及容器組件上內建的ownProps給mapStatesToProperties方法,來構建props,最後將props應用到子組件的UI組件上。

(2)互動行為之後整個邏輯:

當在子組件上發生互動行為,如click時,mapDispatchToProps會定義click觸發時應該dispatch哪一個action的映射。
然後store接收到這個action後會進行reduce,得到最新的state,然後再調用所有的子組件的mapStatesToProps方法產生新的props。
最後對Provider進行重新渲染。當然上面的事件計算出來的很多state可能都不會發生變化,所以diff演算法不會去修改這些沒有發生變化的組件,因此效能也比較好。

 

 

React-Redux 總結

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.