欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react-redux源码不完全指北

程序员文章站 2022-04-17 19:51:58
...

摘要: 本文围绕一个简单的例子展开,主要聚焦于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"
  5. const initialState = { value: 0 }
  6. const ADD_ACTION = 'add';
  7. const reducer = (state = initialState ,action ) => {
  8. switch(action.type){
  9. case ADD_ACTION:
  10. return {
  11. value: ++state.value
  12. }
  13. default:
  14. break;
  15. }
  16. return state
  17. }
  18. const store = createStore(reducer);
  19. const mapStateToProps = state => {
  20. return{
  21. value: state.value
  22. }
  23. }
  24. const mapDispatchToProps = dispatch => {
  25. return {
  26. update(payload){
  27. dispatch({type: ADD_ACTION,payload})
  28. }
  29. }
  30. }
  31. const App = connect(mapStateToProps,mapDispatchToProps)( function InnerCommponent({value,update}){
  32. return(
  33. <div>
  34. value的值是: {value}
  35. <div>
  36. <button onClick={ update }>点击更新</button>
  37. </div>
  38. </div>
  39. )
  40. })
  41. const rootElement = document.getElementById('root')
  42. ReactDOM.render(
  43. <Provider store={store}>
  44. <App />
  45. </Provider>,
  46. rootElement
  47. )

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

篇1 store究竟是个什么东西

storecreateStore(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构建时进行初始化,会传递storesubscription两个参数。store前边已经介绍过了,现在对subscription做一简单介绍:

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

说完subscription,我们继续connectAdvancedconnectAdvanced最终会返回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`上。这样就完成了订阅。
  3. `subscription`的`listeners`,是`subscription`完成其订阅的内部数据结构,使用双向链表即:
  4. ```
  5. {
  6. callback,
  7. next: null,
  8. prev: null,
  9. }
  10. ```
  11. 保存订阅的回调函数,订阅时调用`listeners.subscribe(listener)`:
  12. ```
  13. let listener = (last = {
  14. callback,
  15. next: null,
  16. prev: last,
  17. })
  18. if (listener.prev) {// 不是第一个节点,就链到前一个的后边
  19. listener.prev.next = listener
  20. } else { // 否则就是第一个
  21. first = listener
  22. }
  23. ```
  24. 唤起的时候,代码如下:
  25. ```
  26. ...
  27. batch(() => {
  28. let listener = first
  29. while (listener) {
  30. listener.callback()
  31. listener = listener.next
  32. }
  33. })
  34. ...
  35. ```
  36. 就是一个简单的链表遍历,值得一提的是这个`batch`,实际运行后,调用的是`React`内部的名为`batchedUpdates$1`的函数,该函数会改变`executionContext`的值(`executionContext |= BatchedContext`),其直接结果就是在`React`更新时,`scheduleUpdateOnFiber`的执行不会走`renderRootSync`这样的同步更新,而是会安排一个异步回调,将所有更新合并进行。*这一步可以称之为性能优化*。
  37. * 计算出`actualChildProps`后 ,最终返回 :
  38. ```javascript
  39. <ContextToUse.Provider value={overriddenContextValue}>
  40. {renderedWrappedComponent}
  41. </ContextToUse.Provider>
  42. ```
  43. `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>
    ConnectFunctionProvider是在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源码不完全指北

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)
  5. if (equalityFn(newSelectedState, latestSelectedState.current)) {
  6. return
  7. }
  8. latestSelectedState.current = newSelectedState
  9. latestStoreState.current = newStoreState
  10. // 确确实实更新了,则发起一次更新 这个函数实际还是useReducer的dispatch
  11. forceRender()
  12. ...

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

篇2 useDispatch 实现数据更新

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