• 閱讀react-redux源碼 - 零
• 閱讀react-redux源碼 - 一
• 閱讀react-redux源碼(二) - createConnect、match函數的實現
• 閱讀react-redux源碼(三) - mapStateToPropsFactories、mapDispatchToPropsFactories和mergePropsFactories
• 閱讀react-redux源碼(四) - connectAdvanced、wrapWithConnect、ConnectFunction和checkForUpdates
• 閱讀react-redux源碼(五) - connectAdvanced中store改變的事件轉發、ref的處理和pure模式的處理
• 閱讀react-redux源碼(六) - selectorFactory處理store更新
• 閱讀react-redux源碼(七) - 實現一個react-redux

首先總結react-redux的實現原理，然后根據原理的指導來完成一個簡易的react-redux。

之前說過可以引起React組件更新的元素有兩種，一個是props的更新，一個是state的更新，但是props的跟新放眼整個react應用也是state的更新。所以React應用中組件重新渲染只能通過state的更新。

在React中需要跨層級傳遞消息可以使用Context。

Redux可以通過subscribe來訂閱store中state的更新。

react-redux是通過Context來向下跨組件傳遞store，然后后代組件通過某些方法來監聽store中state的變化，后代組件監聽到變化之后設置state來引起自身的更新。

在這其中需要注意的是后代組件監聽的state之外的state變動需要避免，不要引起自身重新渲染，還有父組件重新render，子組件關注的props沒有更新也需要避免重新render。

ReactRedux的使用方式

首先創建store：

import { createStore } from 'redux'const UPDATE_A = 'UPDATE_A'export function createUpdateA (payload) {return {type: UPDATE_A,payload} }const initialState = {a: 1,b: 1 }function reducer (state = initialState, action) {const {type, payload} = actionswitch (type) {case UPDATE_A:return Object.assign({}, state, {a: payload})default:return state}}export default createStore(reducer)

將store提供給react-redux：

import ReactDOM from 'react-dom' import React from 'react' import Provider from './Provider' import store from './store' import ChildComponentA from './ChildComponentA'function App () {return (<Provider store={store}><CildComponentA /></Provider>) }ReactDOM.render(<App />, document.querySelector('#root'))

將業務組件通過react-redux連接到store

import React from 'react' import connect from './connect' import { createUpdateA } from './store'function _ChildComponentA (props) {console.log('ChildComponentA執行了')return (<div><p>我是來自store的a：{props.a}</p><p onClick={() => props.updateA(props.a + 1)}>a+1</p></div>) }function mapStateToProps (state) {return {a: state.a} }function mapDispatchToProps (dispatch) {return {updateA(a) {dispatch(createUpdateA(a))}} }export default connect(mapStateToProps, mapDispatchToProps)(_ChildComponentA)

上面呈現了react-redux的使用方式，主要使用了兩個方法，一個是Provider，一個是connect。下面將這兩個方法填起來。

react-redux的實現

import { createContext } from 'react'export const context = createContext(null)export default function Provider (props) {return (<context.Provider value={props.store}>{props.children}</context.Provider>) }

這樣Provider就完成了。

import React, { useContext, useState, useEffect } from 'react' import { context as defaultContext } from './provider'function mergeProps (stateProps, dispatchProps, ownProps) {return { ...ownProps, ...stateProps, ...dispatchProps } }export default function connectHoc (mapStateToProps = () => ({}), mapDispatchToProps = () => ({})) {return function wrapWithConnect (wrappedComponent) {function connectFunction (props) {const [_, setState] = useState(0)const store = useContext(defaultContext)useEffect(() => {return store.subscribe(update)}, [])function update () {setState(times => ++times)}const stateProps = mapStateToProps(store.getState())const dispatchProps = mapDispatchToProps(store.dispatch)const allProps = mergeProps(stateProps, dispatchProps, props)return <wrappedComponent {...allProps} />}// 為了阻止父組件render帶來的不必要更新return React.memo(ConnectFunction)} }

到這就完成一半了，實現了子組件訂閱store變化重新渲染的功能，并且可以避免因為父組件更新導致子組件重新渲染引起的性能問題。

還缺一半是store中不關心的state的更新也會引起子組件渲染，現在即使是更新了store中的bChildComponentA也會執行。

添加代碼如下：

store.js：

const UPDATE_B = 'UPDATE_B'export function createUpdateB (payload) {return {type: UPDATE_B,payload} }function reducer (state = initialState, action) {const {type, payload} = actionswitch (type) {...case UPDATE_B:return Object.assign({}, state, {b: payload})...} }

添加組件文件childComponentB.js：

import React from 'react' import connect from '../copyReactRedux2/connect' import { createUpdateB } from './store.js'function _ChildComponentB (props) {console.log('connectFunctionB執行了')return (<div><p>我是來自store的b：{props.b}</p><p onClick={() => props.updateB(props.b + 1)}>b+1</p></div>) }function mapStateToProps (state) {return {b: state.b} }function mapDispatchToProps (dispatch) {return {updateB(b) {dispatch(createUpdateB(b))}} }export default connect(mapStateToProps, mapDispatchToProps)(_ChildComponentB)

在index.js中添加代碼：

function App () {return (...<CildComponentB />...) }

準備就緒，點擊b+1文字會發現控制臺中不僅僅會打印 connectFunctionB執行了還會打印connectFunctionA執行了，這并不是我們希望的。

下面來修改connect的實現修復這個問題。

首先實現下mergeProps函數，讓它具有對比記憶的特性，如果沒有值改變則返回老的mergedProps。

mergeProps函數：

import { shallowEqual, strictEqual } from './equals'function mergeProps (stateProps, dispatchProps, ownProps) {return { ...ownProps, ...stateProps, ...dispatchProps } }function mergedPropsFactory() {let hasOnceRun = falselet stateProps = nulllet dispatchProps = nulllet ownProps = nulllet mergedProps = nullreturn (newStateProps, newDispatchProps, newOwnProps) => {debuggerif (!hasOnceRun) {stateProps = newStatePropsdispatchProps = newDispatchPropsownProps = newOwnPropsmergedProps = mergeProps(stateProps, dispatchProps, ownProps)hasOnceRun = truereturn mergedProps}if (shallowEqual(stateProps, newStateProps) && shallowEqual(ownProps, newOwnProps)) {stateProps = newStatePropsdispatchProps = newDispatchPropsownProps = newOwnProps} else {stateProps = newStatePropsdispatchProps = newDispatchPropsownProps = newOwnPropsmergedProps = mergeProps(stateProps, dispatchProps, ownProps)}return mergedProps} }

修改wrapWithConnect如下：

function wrapWithConnect (WrappedComponent) {function connectFunction (props) {const [_, setState] = useState(0)const store = useContext(defaultContext)useEffect(() => {return store.subscribe(update)}, [])function update () {if (cacheAllProps.current === mergeProps(mapStateToProps(store.getState()), cacheDispatchProps.current, cacheOwnProps.current)) returnsetState(times => ++times)}const mergeProps = useMemo(() => (mergedPropsFactory()), [])const stateProps = mapStateToProps(store.getState())const dispatchProps = mapDispatchToProps(store.dispatch)const allProps = mergeProps(stateProps, dispatchProps, props)const cacheAllProps = useRef(null)const cacheOwnProps = useRef(null)const cacheStatePros = useRef(null)const cacheDispatchProps = useRef(null)useEffect(() => {cacheAllProps.current = allPropscacheStatePros.current = statePropscacheDispatchProps.current = dispatchPropscacheOwnProps.current = props}, [allProps])return <WrappedComponent {...allProps} />}// 為了阻止父組件render帶來的不必要更新return React.memo(connectFunction)} function is(x, y) {if (x === y) {return x !== 0 || y !== 0 || 1 / x === 1 / y} else {return x !== x && y !== y} }export function shallowEqual(objA, objB) {if (is(objA, objB)) return trueif (typeof objA !== 'object' ||objA === null ||typeof objB !== 'object' ||objB === null) {return false}const keysA = Object.keys(objA)const keysB = Object.keys(objB)if (keysA.length !== keysB.length) return falsefor (let i = 0; i < keysA.length; i++) {if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||!is(objA[keysA[i]], objB[keysA[i]])) {return false}}return true }export function strictEqual (a, b) {return a === b }

到這里整個都完整了，上面的代碼實現了將React組建連接到redux，響應store中state的變動，并且還能做到規避不必要的更新。

• 閱讀react-redux源碼 - 零
• 閱讀react-redux源碼 - 一
• 閱讀react-redux源碼(二) - createConnect、match函數的實現
• 閱讀react-redux源碼(三) - mapStateToPropsFactories、mapDispatchToPropsFactories和mergePropsFactories
• 閱讀react-redux源碼(四) - connectAdvanced、wrapWithConnect、ConnectFunction和checkForUpdates
• 閱讀react-redux源碼(五) - connectAdvanced中store改變的事件轉發、ref的處理和pure模式的處理
• 閱讀react-redux源碼(六) - selectorFactory處理store更新
• • 閱讀react-redux源碼(七) - 實現一個react-redux

總結

以上是生活随笔為你收集整理的阅读react-redux源码(七) - 实现一个react-redux的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。