本文原文鏈接

在之前的一篇文章中已講過redux 原理解析，我將redux返回的store對象掛載在window中，不是太懂的同學可以看看之前的redux 原理解析。

const reducer = combineReducers({home: homeNumber,number: addNumber }) const store = createStore(reducer) window.$reduxStore = store// 使用 window.$reduxStore.dispatch(action); let { state } = window.$reduxStore.getState()

但在平時的開發中，一般是將redux+react-redux+react配合使用，那么，下面就一起來看看react-redux中的常見方法，它具體做了什么。【下面是以最新版本react-redux@7.1.3庫解析】(下面的源碼部分省略)

#Provider函數

react-redux提供了<Provider />組件用來掛載redux返回的store對象，同時將整個應用作為Provider的子組件。

ReactDOM.render( <Provider store={store}> <App /> </Provider>, rootElement )

下面看看<Provider />組件做了什么：

function Provider({ store, context, children }) {// 依賴項store變化觸發，返回store和subscriptionconst contextValue = useMemo(() => {// 訂閱監聽Subscription函數，下面會專門說到const subscription = new Subscription(store)subscription.onStateChange = subscription.notifyNestedSubsreturn {store,subscription}}, [store])//...// ReactReduxContext = React.createContext(null)const Context = context || ReactReduxContextreturn <Context.Provider value={contextValue}>{children}</Context.Provider> } // 源碼地址：https://github.com/reduxjs/react-redux/blob/master/src/components/Provider.js#L6

Provider接收三個參數，store參數接收store對象，context參數接收上下文對象，children參數接收ReactElement元素； 在原應用組件上包裹一層，使原來整個應用成為Provider的子組件，Context.Provider API：只有當 Provider 的 value 值發生變化時，它內部的所有消費組件都會重新渲染。

將contextValue掛載在Provider上，contextValue包含store對象和訂閱發布subscription對象，以備connect組件使用獲取。Subscription主要負責connect、Provider組件的更新，屬于核心內容，這些將在下面講到。

#connect函數

connect的常見使用示例：

return connect(mapStateToProps, mapDispatchToProps)(Component)

connect函數就是一個高階組件，將以上的參數傳入函數，返回一個新的組件，主要就是將state和dispatch等屬性掛載Component的props上。

import hoistStatics from 'hoist-non-react-statics' import { ReactReduxContext } from './Context';// 核心函數 return組件 function ConnectFunction (props) {// ...// 判斷props 是否存在store & getState & dispatch，一般都為falsevar didStoreComeFromProps = Boolean(props.store) && Boolean(props.store.getState) && Boolean(props.store.dispatch);// 獲取Provider組件掛載的contextValuevar ContextToUse = useMemo(function () {return propsContext &&propsContext.Consumer &&isContextConsumer(<propsContext.Consumer />)? propsContext: Context})// contextValue = { store, subscription }var contextValue = useContext(ContextToUse)// ...// 依賴返回 contextValuevar overriddenContextValue = useMemo(function () {if (didStoreComeFromProps) {return contextValue}return {...contextValue,subscription}}, [didStoreComeFromProps, contextValue, subscription]);// ...// actualChildProps == props，上掛載了```state```和```dispatch```等屬性const renderedWrappedComponent = useMemo(() => <WrappedComponent {...actualChildProps} ref={forwardedRef} />,[forwardedRef, WrappedComponent, actualChildProps])// 返回渲染ReactElementvar renderedChild = useMemo(function () {// 判斷是否存在mapStateToProps函數if (shouldHandleStateChanges) {return (<ContextToUse.Provider value={overriddenContextValue}>{renderedWrappedComponent}</ContextToUse.Provider>)}// renderedWrappedComponent 渲染容器組件return renderedWrappedComponent}, [ContextToUse, renderedWrappedComponent, overriddenContextValue]);return renderedChild; } // ... // 與Object.assign類似操作 return hoistStatics(ConnectFunction, WrappedComponent)

hoistStatics函數的作用就是類似于Object.assign，可以這樣理解hoistStatics(targetComponent, sourceComponent)，hoist-non-react-statics庫。上面代碼中ConnectFunction是核心函數，雖然中間部分代碼省略，不過留下的都是精華。

在ConnectFunction函數中，通過hooks useContext獲取Provider組件的contextValue對象；renderedWrappedComponent將actualChildProps作為props傳入，actualChildProps是已經處理過的props屬性，上面已經掛載了dispatch函數和state狀態等屬性；而renderedChild組件，其實connect函數最后返回的實際內容。(中間部分代碼省略了源碼鏈接跳轉)

以上就是Provice組件和connect組件初次調用時，所經過的實際代碼，當然在其中有一些刪減，不過基本都有說到。

當dispatch被調用時，會發生什么呢？上面部分完全沒有說到，下面我們就來看看當dispatch(action)調用后，react-redux內部，是如何更新connect組件。

#connect如何更新？

當在React應用中調用dispatch函數時，redux中實際調用的就是reducer函數，同時返回新的state。那么redux-react中的connect組件如何更新呢，下面我們來一起看看更新的流程：

dispatch(action)

下面內容不是精讀代碼，只是聊一下基本的流程。

#初始化

當Provider組件被調用注冊時，訂閱更新Subscription函數被注冊：

const subscription = new Subscription(store)

在redux-react中，訂閱發布函數Subscription是其中的核心函數(訂閱發布模式是其核心)，它有效的保證connect組件的更新渲染。store作為參數傳入到Subscription構造函數內部，作用就是Subscription內部使用。

#訂閱

return connect(mapStateToProps, mapDispatchToProps)(Component)// react-redux中，checkForUpdates函數，負責更新connect組件 subscription.onStateChange = checkForUpdates// redux保存觸發 通知函數 store.subscribe(subscription.notifyNestedSubs);// react-redux保存 更新函數 subscription.listeners.subscribe(subscription.onStateChange)

在connect組件被使用時，react-redux中的subscription對象，會將connect組件的checkForUpdates更新函數作為參數，傳入保存在subscription的訂閱數組next中；同時，redux也會發生相同的操作【在react-redux中也有使用到redux中方法】。(代碼為簡化版)

// redux中 subscribe函數 let nextListeners = [] subscribe(listener) {// ... nextListeners.push(listener) } // react-redux中 subscribe函數 let next = [] subscribe(listener) {// ... next.push(listener) }

checkForUpdates函數負責connect組件的內部的狀態更新。

notifyNestedSubs函數是作用是觸發react-redux中的subscription對象的更新函數，而它被保存在nextListeners數組中，是為了當redux的dispatch函數被觸發時，調用notifyNestedSubs通知函數，進而觸發react-redux的connect組件的checkForUpdates更新函數。

react-redux：checkForUpdates 函數源碼

react-redux：Subscription 函數源碼

#發布(更新)

dispatch(action)發起觸發操作后，當然是觸發store中dispatch函數了，修改store中state的值，更新遍歷redux的nextListeners訂閱數組，觸發通知函數notifyNestedSubs調用；同時，這會導致react-redux中的next數組，被觸發遍歷調用。兩個庫基本都是下面的代碼

let next = listeners;? for (let i = 0; i < listeners.length; i++) {listeners[i]() }

以上細節可能有所省略，但基本就是先訂閱，將更新函數保存進入訂閱數組，然后當dispatch函數被調用時，遍歷調用訂閱數組，完成connect組件的更新。

在最新的react-redxu庫中 ，有大量的React Hooks出現，中間我木有過多的說明，有興趣可以自行研究。(高階組件、React Hooks、訂閱發布模式)

ps: 微信公眾號：Yopai，有興趣的可以關注，每周不定期更新。不斷分享，不斷進步

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的react 判断地址是否有效_继续，react-redux原理解析的全部內容，希望文章能夠幫你解決所遇到的問題。

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