react-redux源码不完全指北

摘要： 本文围绕一个简单的例子展开，主要聚焦于react-redux架构下数据的流动，包括数据的派发和更新。首先介绍传统模式，然后介绍一下hooks模式的 本文基于react-redux7.2.4

传统模式

一个典型的react-redux应用一般具有如下结构:

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. import { connect,Provider } from "react-redux"
  4. import { createStore } from "redux"
  6. const initialState = { value: 0 }
  7. const ADD_ACTION = 'add';
  8. const reducer = (state = initialState ,action ) => {
  9.   switch(action.type){
  10.     case ADD_ACTION: 
  11.       return {
  12.         value: ++state.value
  13.       }
  15.     default: 
  16.       break; 
  17.   }
  18.   return state
  19. }
  20. const store = createStore(reducer);
  22. const mapStateToProps = state => {
  23.     return{
  24.         value: state.value
  25.     }
  26. }
  27. const mapDispatchToProps = dispatch => {
  28.     return {
  29.         update(payload){
  30.             dispatch({type: ADD_ACTION,payload})
  31.         }
  32.     }
  33. }
  35. const App = connect(mapStateToProps,mapDispatchToProps)( function InnerCommponent({value,update}){
  36.   return(
  37.     <div>
  38.       value的值是: {value}
  39.       <div>
  40.         <button onClick={ update }>点击更新</button>
  41.       </div>
  42.     </div>
  43.   )
  44. })
  46. const rootElement = document.getElementById('root')
  47. ReactDOM.render(
  48.   <Provider store={store}>
  49.     <App />
  50.   </Provider>,
  51.   rootElement
  52. )

基于此代码 我们从上到下 依次梳理梳理

篇1 store究竟是个什么东西

store由createStore(reducer)创建而来，最后的store具有如下的数据结构:

  1.   {
  2.     dispatch,
  3.     subscribe,
  4.     getState,
  5.     replaceReducer,
  6.     [$$observable]: observable,
  7.   }

其中 subscribe用于完成订阅,dispatch就是用于发起一次state更新的函数，并唤起subscribe订阅的回调，getState返回当前的state,replaceReducer用于替换reducer.
完成订阅的步骤非常简单，就是往一个数组里添加回调函数:

  1.     ...
  2.     nextListeners.push(listener)
  3.     ...

而唤起的时候，就是遍历listeners,依次执行回调:

  1.     ...
  2.     const listeners = (currentListeners = nextListeners)
  3.     for (let i = 0; i < listeners.length; i++) {
  4.       const listener = listeners[i]
  5.       listener()
  6.     }
  7.     ...

篇2 connect究竟是个什么东西,以及他的作用

connect 主要有以下几个作用:

  1. 初始化mapStateToProps,mapDispatchToProps,以及mergeProps(这是connect的第三个参数)，主要是参数校验,然后会将其包装成具有统一签名：initProxySelector(dispatch, { displayName })的函数。
  2. 初始化selectorFactory，该函数用于生成最终我们定义的组件的props。
  3. 更多的工作，其实就是为connectAdvanced函数提供初始入参配置。

最终会返回connectAdvanced函数的执行结果。

connectAdvanced除了基本的一些初始化参数配置外，还有一点就是拿到了context,该context的value在Provider构建时进行初始化，会传递store和subscription两个参数。store前边已经介绍过了，现在对subscription做一简单介绍：

subscription是Subscription类的实例，主要是封装了组件到store的订阅逻辑，同时也可以处理嵌套的子组件的订阅逻辑，保证更新是由父到子进行的，一般调用该实例的trySubscribe方法完成订阅。

说完subscription,我们继续connectAdvanced。connectAdvanced最终会返回wrapWithConnect函数，上述代码中的App也正是wrapWithConnect的执行结果。

wrapWithConnect,可以看成一个高阶组件，接受WrappedComponent即一个React组件WrappedComponent作为入参，在其内部主要干了这么几件事：

  • 初始化createChildSelector,该函数用于计算出当前组件的props
  • 初始化ConnectFunction, 该内部主要功能有：
    • 使用useMemo完成Subscription的初始化，此Subscription实例初始化的时候，作为子组件的subscription,一般都会传进去父组件的subscription。父组件的subscription就是由connectAdvanced拿到的context进行传递的。
    • 用useLayoutEffect(客户端)或useEffect(ssr)，完成订阅(源代码做了简单的修改):
      ```javascript
      1.  ...
      2.  subscription.onStateChange = checkForUpdates
      3.  subscription.trySubscribe()
      4. ...
      5. ...
      6. //subscription内部 trySubscribe
      7. // handleChangeWrapper 最终执行时会调起onStateChange
      8. this.parentSub.addNestedSub(this.handleChangeWrapper)
      9. ...
      10. // addNestedSub
      11. ...
      12. this.listeners.subscribe(listener)
      13. ...
  1.     ```
  2.     可以看到，子组件内部的订阅最终会挂在父组件传下来的`subscription`的`listeners`上。这样就完成了订阅。
  4.     `subscription`的`listeners`，是`subscription`完成其订阅的内部数据结构，使用双向链表即：
  5.     ```
  6.     {
  7.         callback,
  8.         next: null,
  9.         prev: null,
  10.   }
  11.     ```
  12.     保存订阅的回调函数，订阅时调用`listeners.subscribe(listener)`：
  13.     ```
  14.         let listener = (last = {
  15.             callback,
  16.             next: null,
  17.             prev: last,
  18.           })
  19.           if (listener.prev) {// 不是第一个节点，就链到前一个的后边
  20.             listener.prev.next = listener
  21.           } else { // 否则就是第一个
  22.             first = listener
  23.           }
  24.     ```
  26.     唤起的时候，代码如下:
  27.     ```
  28.     ...
  29.         batch(() => {
  30.             let listener = first
  31.             while (listener) {
  32.               listener.callback()
  33.               listener = listener.next
  34.             }
  35.           })
  36.   ...
  37.     ```
  38.     就是一个简单的链表遍历，值得一提的是这个`batch`,实际运行后，调用的是`React`内部的名为`batchedUpdates$1`的函数，该函数会改变`executionContext`的值(`executionContext |= BatchedContext`)，其直接结果就是在`React`更新时，`scheduleUpdateOnFiber`的执行不会走`renderRootSync`这样的同步更新，而是会安排一个异步回调，将所有更新合并进行。*这一步可以称之为性能优化*。
  39.  * 计算出`actualChildProps`后 ,最终返回 : 
  40.      ```javascript
  41.      <ContextToUse.Provider value={overriddenContextValue}>
  42.       {renderedWrappedComponent}
  43.     </ContextToUse.Provider>
  44.      ```
  45.      `ContextToUse`一般就是上边提到的`context`，`overriddenContextValue`数据结构同`context`的value,只是会将`subscription`替换为当前组件的`subscription`。在组件上包裹一层provider是因为，react总是就近取context，这样一来可以保证`renderedWrappedComponent`的嵌套子组件如果访问`ContextToUse`总是可以取到和当前组件相同的context实例，并且当子组件有订阅行为时，可以将其订阅在自己的`addNestedSub`,保证更新由父到子进行。
  • 最后将WrappedComponent的静态属性合并到ConnectFunction上，返回ConnectFunction。

篇3 Provider

实际就是一个普通的组件，主要办了这么几件事：

  • 初始化自身的subscription,
    1.   const subscription = new Subscription(store)
    并协同store使用useMemo一起挂到contextValue上
  • 用useLayoutEffect(客户端)或useEffect(ssr)，完成订阅(源代码做了简单的修改):
    1.   ...
    2.   subscription.onStateChange = subscription.notifyNestedSubs
    3.   ...
    4.   subscription.trySubscribe()
    5.   ...
    6.   //subscription内部 trySubscribe
    7.   ...
    8.   this.store.subscribe(this.handleChangeWrapper)
    9.   ...
    10.   //store.subscribe  nextListeners介绍store的时候提到过就是一个数组，listener就是上边传过去的回调
    11.   nextListeners.push(listener)
    12.   ...
  • 最后返回
    1.   <Context.Provider value={contextValue}>{children}</Context.Provider>
    ConnectFunction和Provider是在React更新流程的beiginWor阶段调用的。

介绍完基本概念可以正式开始介绍数据的更新和派发了。

篇4 数据派发

派发数据相对来说比较简单，可以想想，当数据更新后，在一个使用connect一顿操作过后的原始组件，其对外窗口只有一个，那就是props，所以更新后的数据主要就是props的计算。

ConnectFunction内部计算props时，自childPropsSelector(store.getState(), wrapperProps)始,中间经历了很长的链路，这里的细节我们无需关注，但是可以给出最后的结果就是:

  1. // pureFinalPropsSelectorFactory
  2. ...
  3.     stateProps = mapStateToProps(state, ownProps)
  4.     dispatchProps = mapDispatchToProps(dispatch, ownProps)
  5.     mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
  6. ...

最后的返回结果便是，stateProps, dispatchProps, ownProps合并之后的结果。基于此呢，组件就可以从props读取到react-redux派发下来的数据了。

篇5 数据更新

一次更新由dispatch发起，基本工作就是更新state,唤起订阅的回调函数

流程概览

react-redux-dispatch.png

hooks模式

篇1 useSelector 实现数据派发

从函数签名说起

  1. useSelector(selector, equalityFn = refEquality)

selector是一个自定义函数，useSelector调用的时候，会传进去当前state作为参数，最终返回的东西我们叫它selectedState
equalityFn则是用于判断selector返回值前后是否发生了变化

内部实现上，也会有自己的订阅行为，和subscription,实现订阅的时机和上述Provider的相同，该订阅函数主要实现的是selectedState的更新：

  1. //checkForUpdates内部
  2. ...
  3. const newStoreState = store.getState()
  4. const newSelectedState = latestSelector.current(newStoreState)
  6. if (equalityFn(newSelectedState, latestSelectedState.current)) {
  7.   return
  8. }
  10. latestSelectedState.current = newSelectedState
  11. latestStoreState.current = newStoreState
  12. // 确确实实更新了，则发起一次更新 这个函数实际还是useReducer的dispatch
  13. forceRender()
  14. ...

useSelector每次执行，都会从store拿到最新的selectedState并返回。同时，只有selector、storeState二者有其一发生变化，或者订阅函数执行时发生变化，同时，equalityFn此时的执行结果为false，也就是说前后的selectedState确实变化了，selectedState的值才会更新。

篇2 useDispatch 实现数据更新

emmm，这玩意就是store.dispatch，具体原理同上边的dispatch

posted @ 2021-09-05 10:12  子龙_子龙  阅读(29)  评论(0)    收藏  举报