詳解關于react-redux中的connect用法介紹及原理解析
關于react-redux的一個流程圖
流程圖
connect用法介紹
connect方法聲明:
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
作用:連接React組件與 Redux store。
參數(shù)說明:
mapStateToProps(state, ownProps) : stateProps
這個函數(shù)允許我們將 store 中的數(shù)據(jù)作為 props 綁定到組件上。
const mapStateToProps = (state) => { return { count: state.count } }
(1)這個函數(shù)的第一個參數(shù)就是 Redux 的 store,我們從中摘取了 count 屬性。你不必將 state 中的數(shù)據(jù)原封不動地傳入組件,可以根據(jù) state 中的數(shù)據(jù),動態(tài)地輸出組件需要的(最?。傩?。
(2)函數(shù)的第二個參數(shù) ownProps,是組件自己的 props。有的時候,ownProps 也會對其產(chǎn)生影響。
當 state 變化,或者 ownProps 變化的時候,mapStateToProps 都會被調(diào)用,計算出一個新的 stateProps,(在與 ownProps merge 后)更新給組件。
mapDispatchToProps(dispatch, ownProps): dispatchProps
connect 的第二個參數(shù)是 mapDispatchToProps,它的功能是,將 action 作為 props 綁定到組件上,也會成為 MyComp 的 props。
[mergeProps],[options]
不管是 stateProps 還是 dispatchProps,都需要和 ownProps merge 之后才會被賦給組件。connect 的第三個參數(shù)就是用來做這件事。通常情況下,你可以不傳這個參數(shù),connect 就會使用 Object.assign 替代該方法。
[options] (Object) 如果指定這個參數(shù),可以定制 connector 的行為。一般不用。
原理解析
首先connect之所以會成功,是因為Provider組件:
- 在原應用組件上包裹一層,使原來整個應用成為Provider的子組件
- 接收Redux的store作為props,通過context對象傳遞給子孫組件上的connect
那connect做了些什么呢?
它真正連接 Redux 和 React,它包在我們的容器組件的外一層,它接收上面 Provider 提供的 store 里面的 state 和 dispatch,傳給一個構(gòu)造函數(shù),返回一個對象,以屬性形式傳給我們的容器組件。
關于它的源碼
connect是一個高階函數(shù),首先傳入mapStateToProps、mapDispatchToProps,然后返回一個生產(chǎn)Component的函數(shù)(wrapWithConnect),然后再將真正的Component作為參數(shù)傳入wrapWithConnect,這樣就生產(chǎn)出一個經(jīng)過包裹的Connect組件,該組件具有如下特點:
- 通過props.store獲取祖先Component的store
- props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState,作為props傳給真正的Component
- componentDidMount時,添加事件this.store.subscribe(this.handleChange),實現(xiàn)頁面交互
- 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) { // 進行判斷,當數(shù)據(jù)發(fā)生改變時,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ù)器使用的實例:
Component/Counter.js
import React, {Component} from 'react' class Counter extends Component { render() { //從組件的props屬性中導入四個方法和一個變量 const {increment, decrement, counter} = this.props; //渲染組件,包括一個數(shù)字,四個按鈕 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
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
React Native中WebView與html雙向通信遇到的坑
這篇文章主要介紹了React Native中WebView與html雙向通信的一些問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2023-01-01React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)
這篇文章主要介紹了React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09React?數(shù)據(jù)共享useContext的實現(xiàn)
本文主要介紹了React?數(shù)據(jù)共享useContext的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-04-04react-native中ListView組件點擊跳轉(zhuǎn)的方法示例
ListView作為React Native的核心組件,用于高效地顯示一個可以垂直滾動的變化的數(shù)據(jù)列表。下面這篇文章主要給大家介紹了關于react-native中ListView組件點擊跳轉(zhuǎn)的相關資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09詳解react中useCallback內(nèi)部是如何實現(xiàn)的
前幾天有人在問在useCallback函數(shù)如果第二個參數(shù)為空數(shù)組, 為什么拿不到最新的state值,那么這一章就來分析一下useCallback內(nèi)部是如何實現(xiàn)的,感興趣的小伙伴跟著小編一起來學習吧2023-07-07