關(guān)于react-redux的一個(gè)流程圖

創(chuàng)新互聯(lián)是專業(yè)的霍邱網(wǎng)站建設(shè)公司，霍邱接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行霍邱網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

流程圖

connect用法介紹

connect方法聲明：

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

作用：連接React組件與 Redux store。

參數(shù)說明：

mapStateToProps(state, ownProps) : stateProps

這個(gè)函數(shù)允許我們將 store 中的數(shù)據(jù)作為 props 綁定到組件上。

const mapStateToProps = (state) => {
 return {
  count: state.count
 }
}

（1）這個(gè)函數(shù)的第一個(gè)參數(shù)就是 Redux 的 store，我們從中摘取了 count 屬性。你不必將 state 中的數(shù)據(jù)原封不動(dòng)地傳入組件，可以根據(jù) state 中的數(shù)據(jù)，動(dòng)態(tài)地輸出組件需要的（最小）屬性。

（2）函數(shù)的第二個(gè)參數(shù) ownProps，是組件自己的 props。有的時(shí)候，ownProps 也會(huì)對(duì)其產(chǎn)生影響。

當(dāng) state 變化，或者 ownProps 變化的時(shí)候，mapStateToProps 都會(huì)被調(diào)用，計(jì)算出一個(gè)新的 stateProps，（在與 ownProps merge 后）更新給組件。

mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 的第二個(gè)參數(shù)是 mapDispatchToProps，它的功能是，將 action 作為 props 綁定到組件上，也會(huì)成為 MyComp 的 props。

[mergeProps],[options]

不管是 stateProps 還是 dispatchProps，都需要和 ownProps merge 之后才會(huì)被賦給組件。connect 的第三個(gè)參數(shù)就是用來做這件事。通常情況下，你可以不傳這個(gè)參數(shù)，connect 就會(huì)使用 Object.assign 替代該方法。

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

原理解析

首先connect之所以會(huì)成功，是因?yàn)镻rovider組件：

1. 在原應(yīng)用組件上包裹一層，使原來整個(gè)應(yīng)用成為Provider的子組件
2. 接收Redux的store作為props，通過context對(duì)象傳遞給子孫組件上的connect

那connect做了些什么呢？

它真正連接 Redux 和 React，它包在我們的容器組件的外一層，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，傳給一個(gè)構(gòu)造函數(shù)，返回一個(gè)對(duì)象，以屬性形式傳給我們的容器組件。

關(guān)于它的源碼

connect是一個(gè)高階函數(shù)，首先傳入mapStateToProps、mapDispatchToProps，然后返回一個(gè)生產(chǎn)Component的函數(shù)(wrapWithConnect)，然后再將真正的Component作為參數(shù)傳入wrapWithConnect，這樣就生產(chǎn)出一個(gè)經(jīng)過包裹的Connect組件，該組件具有如下特點(diǎn):

1. 通過props.store獲取祖先Component的store
2. props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState，作為props傳給真正的Component
3. componentDidMount時(shí)，添加事件this.store.subscribe(this.handleChange)，實(shí)現(xiàn)頁面交互
4. shouldComponentUpdate時(shí)判斷是否有避免進(jìn)行渲染，提升頁面性能，并得到nextState
5. componentWillUnmount時(shí)移除注冊(cè)的事件this.handleChange

由于connect的源碼過長(zhǎng)，我們只看主要邏輯：

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
 return function wrapWithConnect(WrappedComponent) {
  class Connect extends Component {
   constructor(props, context) {
    // 從祖先Component處獲得store
    this.store = props.store || context.store
    this.stateProps = computeStateProps(this.store, props)
    this.dispatchProps = computeDispatchProps(this.store, props)
    this.state = { storeState: null }
    // 對(duì)stateProps、dispatchProps、parentProps進(jìn)行合并
    this.updateState()
   }
   shouldComponentUpdate(nextProps, nextState) {
    // 進(jìn)行判斷，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，Component重新渲染
    if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
     this.updateState(nextProps)
      return true
     }
    }
    componentDidMount() {
     // 改變Component的state
     this.store.subscribe(() = {
      this.setState({
       storeState: this.store.getState()
      })
     })
    }
    render() {
     // 生成包裹組件Connect
     return (
      <WrappedComponent {...this.nextState} />
     )
    }
   }
   Connect.contextTypes = {
    store: storeShape
   }
   return Connect;
  }
 }

connect使用實(shí)例

這里我們寫一個(gè)關(guān)于計(jì)數(shù)器使用的實(shí)例：

Component/Counter.js

import React, {Component} from 'react'

class Counter extends Component {
  render() {
    //從組件的props屬性中導(dǎo)入四個(gè)方法和一個(gè)變量
    const {increment, decrement, counter} = this.props;
    //渲染組件，包括一個(gè)數(shù)字，四個(gè)按鈕
    return (
      <p>
        Clicked: {counter} times
        {' '}
        <button onClick={increment}>+</button>
        {' '}
        <button onClick={decrement}>-</button>
        {' '}
      </p>
    )
  }
}

export default Counter;

Container/App.js

import { connect } from 'react-redux'
import Counter from '../components/Counter'
import actions from '../actions/counter';

//將state.counter綁定到props的counter
const mapStateToProps = (state) => {
  return {
    counter: state.counter
  }
};
//將action的所有方法綁定到props上
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increment: (...args) => dispatch(actions.increment(...args)),
    decrement: (...args) => dispatch(actions.decrement(...args))
  }
};

//通過react-redux提供的connect方法將我們需要的state中的數(shù)據(jù)和actions中的方法綁定到props上
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

完整代碼

Github：https://github.com/lipeishang/react-redux-connect-demo

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：詳解關(guān)于react-redux中的connect用法介紹及原理解析
瀏覽路徑：http://aaarwkj.com/article20/pesjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、建站公司、品牌網(wǎng)站制作、軟件開發(fā)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)