詳解關于react-redux中的connect用法介紹及原理解析

來源：懂視網責編：小采時間：2020-11-27 22:30:26

詳解關于react-redux中的connect用法介紹及原理解析

詳解關于react-redux中的connect用法介紹及原理解析:關于react-redux的一個流程圖流程圖 connect用法介紹 connect方法聲明： connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用：連接React組件與 Redux store。參數說明： mapStateToP

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解關于react-redux中的connect用法介紹及原理解析:關于react-redux的一個流程圖流程圖 connect用法介紹 connect方法聲明： connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用：連接React組件與 Redux store。參數說明： mapStateToP

關于react-redux的一個流程圖

流程圖

connect用法介紹

connect方法聲明：

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

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

參數說明：

mapStateToProps(state, ownProps) : stateProps

這個函數允許我們將 store 中的數據作為 props 綁定到組件上。

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

（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 替代該方法。

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

原理解析

首先connect之所以會成功，是因為Provider組件：

在原應用組件上包裹一層，使原來整個應用成為Provider的子組件
接收Redux的store作為props，通過context對象傳遞給子孫組件上的connect

那connect做了些什么呢？

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

關于它的源碼

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

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

由于connect的源碼過長，我們只看主要邏輯：

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 }
 // 對stateProps、dispatchProps、parentProps進行合并
 this.updateState()
 }
 shouldComponentUpdate(nextProps, nextState) {
 // 進行判斷，當數據發生改變時，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使用實例

這里我們寫一個關于計數器使用的實例：

Component/Counter.js

import React, {Component} from 'react'

class Counter extends Component {
 render() {
 //從組件的props屬性中導入四個方法和一個變量
 const {increment, decrement, counter} = this.props;
 //渲染組件，包括一個數字，四個按鈕
 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中的數據和actions中的方法綁定到props上
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

完整代碼

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com