關(guān)于react-redux的一個(gè)流程圖
流程圖
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ì)對其產(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組件：
那connect做了些什么呢？
它真正連接 Redux 和 React，它包在我們的容器組件的外一層，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，傳給一個(gè)構(gòu)造函數(shù)，返回一個(gè)對象，以屬性形式傳給我們的容器組件。
關(guān)于它的源碼
connect是一個(gè)高階函數(shù)，首先傳入mapStateToProps、mapDispatchToProps，然后返回一個(gè)生產(chǎn)Component的函數(shù)(wrapWithConnect)，然后再將真正的Component作為參數(shù)傳入wrapWithConnect，這樣就生產(chǎn)出一個(gè)經(jīng)過包裹的Connect組件，該組件具有如下特點(diǎn):
由于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進(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的counterconst 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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
