react-redux源码不完全指北

子龙_
316 阅读4分钟

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

传统模式

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

import React from 'react'
import ReactDOM from 'react-dom'
import { connect,Provider } from "react-redux"
import { createStore } from "redux"

const initialState = { value: 0 }
const ADD_ACTION = 'add';
const reducer = (state = initialState ,action ) => {
  switch(action.type){
    case ADD_ACTION: 
      return {
        value: ++state.value
      }
      
    default: 
      break; 
  }
  return state
}
const store = createStore(reducer);

const mapStateToProps = state => {
    return{
        value: state.value
    }
}
const mapDispatchToProps = dispatch => {
    return {
        update(payload){
            dispatch({type: ADD_ACTION,payload})
        }
    }
}

const App = connect(mapStateToProps,mapDispatchToProps)( function InnerCommponent({value,update}){
  return(
    <div>
      value的值是: {value}
      <div>
        <button onClick={ update }>点击更新</button>
      </div>
    </div>
  )
})

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

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

篇1 store究竟是个什么东西

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

  {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable,
  }

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

    ...
    nextListeners.push(listener)
    ...

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

    ...
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
    ...

篇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进行传递的:

      const subscription = new Subscription(
  store,
  // 子组件的store基本都来自context，三元运算符走第二个分支
  didStoreComeFromProps ? null : contextValue.subscription
)

    • 用useLayoutEffect(客户端)或useEffect(ssr)，完成订阅(源代码做了简单的修改):

         ...
   subscription.onStateChange = checkForUpdates
   subscription.trySubscribe()
  ...
  ...
  //subscription内部 trySubscribe
  // handleChangeWrapper 最终执行时会调起onStateChange
  this.parentSub.addNestedSub(this.handleChangeWrapper)
  ...
  // addNestedSub
  ...
  this.listeners.subscribe(listener)
  ...

      可以看到，子组件内部的订阅最终会挂在父组件传下来的subscription的listeners上。这样就完成了订阅。

      subscription的listeners，是subscription完成其订阅的内部数据结构，使用双向链表即：

      {
    callback,
    next: null,
    prev: null,
}

      保存订阅的回调函数，订阅时调用listeners.subscribe(listener)：

          let listener = (last = {
        callback,
        next: null,
        prev: last,
      })
      if (listener.prev) {// 不是第一个节点，就链到前一个的后边
        listener.prev.next = listener
      } else { // 否则就是第一个
        first = listener
      }

      唤起的时候，代码如下:

      ...
    batch(() => {
        let listener = first
        while (listener) {
          listener.callback()
          listener = listener.next
        }
      })
...

      就是一个简单的链表遍历，值得一提的是这个batch,实际运行后，调用的是React内部的名为batchedUpdates$1的函数，该函数会改变executionContext的值(executionContext |= BatchedContext)，其直接结果就是在React更新时，scheduleUpdateOnFiber的执行不会走renderRootSync这样的同步更新，而是会安排一个异步回调，将所有更新合并进行。这一步可以称之为性能优化。

    • 计算出actualChildProps后 ,最终返回 :

      <ContextToUse.Provider value={overriddenContextValue}>
 {renderedWrappedComponent}
</ContextToUse.Provider>

      ContextToUse一般就是上边提到的context，overriddenContextValue数据结构同context的value,只是会将subscription替换为当前组件的subscription。在组件上包裹一层provider是因为，react总是就近取context，这样一来可以保证renderedWrappedComponent的嵌套子组件如果访问ContextToUse总是可以取到和当前组件相同的context实例，并且当子组件有订阅行为时，可以将其订阅在自己的addNestedSub,保证更新由父到子进行。

  • 最后将WrappedComponent的静态属性合并到ConnectFunction上，返回ConnectFunction。

篇3 Provider

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

  • 初始化自身的subscription, 
    const subscription = new Subscription(store)
    并协同store使用useMemo一起挂到contextValue上
  • 用useLayoutEffect(客户端)或useEffect(ssr)，完成订阅(源代码做了简单的修改): 
    ...
subscription.onStateChange = subscription.notifyNestedSubs
...
subscription.trySubscribe()
...
//subscription内部 trySubscribe
...
this.store.subscribe(this.handleChangeWrapper)
...
//store.subscribe  nextListeners介绍store的时候提到过就是一个数组，listener就是上边传过去的回调
nextListeners.push(listener)
...
  • 最后返回 
    <Context.Provider value={contextValue}>{children}</Context.Provider>

ConnectFunction和Provider是在React更新流程的beiginWor阶段调用的。

订阅流程概览：

image.png

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

篇4 数据派发

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

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

// pureFinalPropsSelectorFactory
...
    stateProps = mapStateToProps(state, ownProps)
    dispatchProps = mapDispatchToProps(dispatch, ownProps)
    mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
...

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

篇5 数据更新

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

流程概览

react-redux-dispatch.png

hooks模式

篇1 useSelector 实现数据派发

从函数签名说起

useSelector(selector, equalityFn = refEquality)

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

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

//checkForUpdates内部
...
const newStoreState = store.getState()
const newSelectedState = latestSelector.current(newStoreState)

if (equalityFn(newSelectedState, latestSelectedState.current)) {
  return
}

latestSelectedState.current = newSelectedState
latestStoreState.current = newStoreState
// 确确实实更新了，则发起一次更新 这个函数实际还是useReducer的dispatch
forceRender()
...

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

篇2 useDispatch 实现数据更新

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

avatar
文章
阅读
粉丝