reactHook之useState的源码解析

下面分析16.14.2版本react中useState的源码实现

介绍

数据结构

当前fiber节点的数据结构是：

const fiberNode = {
    tag: xxx, // 标记不同的组件类型
    key: xxx,
    memoizedState: { // hooks
        baseState: xxx, // 初始化 initialState， 每次 dispatch 之后的newState
        memoizedState: xxx, // 上次更新完之后的最终值
        queue: { // 缓存的更新队列，
            lastRenderedReducer: basicStateReducer(state, action),
            lastRenderedState: xxx, // 上次state的值
            pending: null // 存放即将更新的newState信息
        },
        next: null, // link到下一个hooks，通过next串联每一个hooks
    }
}

React 的 Hooks 是一个单向链表，Hook.next 指向下一个 Hook。

Fiber.memoizedState => hook1  state1 === hook1.memoizedState 
hook1.next => hook2           state2 === hook2.memoizedState
hook2.next => hook3           state3 === hook2.memoizedState

入口文件

react/cjs/react.development.js

function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

resolveDispatcher返回的是ReactCurrentDispatcher.current，所以useState = ReactCurrentDispatcher.current.useState

首次渲染

ReactDOM.render(<App/>, rootElement)，react从render开始执行

render => ... => beginWork => updateFunctionComponent =>  renderWithHooks

hooks的核心渲染逻辑入口是renderWithHooks。

renderWithHooks

// 14762
renderWithHooks()
    // 14787 核心逻辑
    if (current !== null && current.memoizedState !== null) {
      ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;
    } else { // 组件首次挂载时
      ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
    }
    =>
    15694 HooksDispatcherOnMountInDEV.useState = {
      return mountState(initialState) // 15766
    }
    15881 HooksDispatcherOnUpdateInDEV.useState = {
      return updateState(initialState) // 15939
    }
    // 14851
    currentlyRenderingFiber$1 = null;
    currentHook = null;
    workInProgressHook = null;
}

从上述代码可知，首次挂载时，useState = HooksDispatcherOnMountInDEV.useState = mountState;state更新时，useState = HooksDispatcherOnUpdateInDEV.useState = mountState

mountState

// 15213 第一次调用组件的 useState 时实际调用的方法
function mountState(initialState) {
  var hook = mountWorkInProgressHook(); // / 创建一个新的 Hook，并返回当前 workInProgressHook

  if (typeof initialState === 'function') {
    initialState = initialState();
  }

  hook.memoizedState = hook.baseState = initialState;
  var queue = hook.queue = {
    pending: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: initialState
  };
  // 绑定当前 fiber 和 queue 到 dispatchAction 上
  // currentlyRenderingFiber$1是一个全局变量，表示当前正在渲染的Fiber节点
  var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
  // const [name, setName] = useState('king')
  // king 赋值给了 hook.memoizedState， setName表示dispatch，当调用setName('queen')会执行dispatchAction('queen')
  return [hook.memoizedState, dispatch];
}

（1）执行mountWorkInProgressHook()，更新hook链表，并返回当前 workInProgressHook

// 14921 创建一个新的 hook，并返回当前 workInProgressHook
function mountWorkInProgressHook() {
  var hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null
  };
  if (workInProgressHook === null) {
        // 只有在第一次打开页面的时候，workInProgressHook 为空
    currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook;
  } else {
        // 已经存在 workInProgressHook 就将新创建的这个 Hook 接在 workInProgressHook 的尾部
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}

（2）获取当前的workInProgressHook后，初始化了hook.memoizedState、hook.baseState、hook.queue和queue.dispatch

（3）basicStateReducer的源码如下：

// 15007
function basicStateReducer(state, action) {
  return typeof action === 'function' ? action(state) : action;
}

（4）最终返回一个数组 [hook.memoizedState, dispatch]
执行setName('queen')，其实就是执行dispatch('queen')

第一次const [name, setName] = useState('king')，mountWorkInProgressHook()后，hook的值为

hook = {
    baseQueue: null,
    baseState: 'king',
    memoizedState: 'king',
    next: null,
    queue: {
            dispatch: fucntion,
            lastRenderedReducer: basicStateReducer(state, action),
            lastRenderedState: 'king',
            pending: null
    }
}

第二次const [count, setCount] = useState(0)，mountWorkInProgressHook()后，hook的值为

hook = {
    baseQueue: null,
    baseState: 'king',
    memoizedState: 'king',
    queue: {
        dispatch: fucntion,
        lastRenderedReducer: basicStateReducer(state, action),
        lastRenderedState: 'king',
        pending: null
    },
    next: {
        baseQueue: null,
        baseState: 0,
        memoizedState: 0,
        queue: {
            dispatch: fucntion,
            lastRenderedReducer: basicStateReducer(state, action),
            lastRenderedState: 0,
            pending: null
        },
    },
}

dispatchAction

以const [name, setName] = useState('king') setName('queen')为例：

执行setName('queen')，其实就是执行dispatchAction(fiber, queue, 'queen')

• dispatchAction() 会创建 update 对象({action:’queen’})
• 将 update 加至 hook.queue 的末尾：hook.queue.pending = update
• 执行 scheduleWork()，走 updateFunctionComponent() 流程
  核心代码：

  // 15564
  function dispatchAction(fiber, queue, action) {
    // action 就是传进来要更新的 state->'queen'
    var update = {
      expirationTime: expirationTime,
      suspenseConfig: suspenseConfig,
      action: action,
      eagerReducer: null,
      eagerState: null,
      next: null
    };
    // 这里的queue，是之前传入的hook对象中的queue，这里保留了一个引用！！（即queue发生变化，当前fiber节点的hook数据也是同步变更的）
    var pending = queue.pending;
    if (pending === null) {
      // This is the first update. Create a circular list.
      update.next = update;
    } else {
      update.next = pending.next;
      pending.next = update;
    }
    //  将update对象加至hook.queue的末尾pending中
    queue.pending = update;
  
    var currentState = queue.lastRenderedState;
    // currentState: king，action: queen
    // 将新的state queen 赋值到 update.eagerState
    var eagerState = lastRenderedReducer(currentState, action); 
    update.eagerReducer = lastRenderedReducer;
    update.eagerState = eagerState;
    // ...
    scheduleWork(fiber, expirationTime)
  }

  setName('queen')，即执行dispatchAction()后，hook变为

  hook = {
      baseQueue: null,
      baseState: 'king',
      memoizedState: 'king',
      queue: {
          lastRenderedReducer: basicStateReducer(state, action),
          lastRenderedState: 'king',
          pending: {
              action: 'queen',
              eagerState: 'queen',
              next: pending // pedding对象，单链表
          }
      },
      next: {
          baseQueue: null,
          baseState: 0,
          memoizedState: 0,
          queue: {
              lastRenderedReducer: basicStateReducer(state, action),
              lastRenderedState: 0,
              pending: null
          },
      },
  }

  最后会执行scheduleWork(fiber, expirationTime)，经过React的调度，会带上action（setName的传参），再次进入hook组件核心渲染逻辑：renderWithHooks。

  dispatchAction => scheduleUpdateOnFiber => ensureRootIsScheduled => performConcurrentWorkOnRoot => performUnitOfWork => beginWork => updateFunctionComponent 
  => renderWithHooks

  此时，由于并非首次渲染组件，React会使用HooksDispatcherOnUpdateInDEV对象上的useState，useState = HooksDispatcherOnUpdateInDEV.useState = mountState。在这个useState中，会使用一个叫做updateState的函数来更新最新的state值。

  // 14762
  renderWithHooks()
      // 14787 核心逻辑
      if (current !== null && current.memoizedState !== null) {
        ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;
      } else { // 组件首次挂载时
        ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
      }
      =>
      15694 HooksDispatcherOnMountInDEV.useState = {
        return mountState(initialState) // 15766
      }
      15881 HooksDispatcherOnUpdateInDEV.useState = {
        return updateState(initialState) // 15939
      }
      // ...
      var children = Component(props, secondArg)
  }

  renderWithHooks()中有一个Component()方法，用来执行App()，此时又会执行 const [name, setName] = useState('king')，最终调用的是HooksDispatcherOnUpdateInDEV.useState(king') => updateState('king')。

  更新

  updateState()

  由updateState可以看出，实际调用的是 updateReducer

  // 15233
  function updateState(initialState) {
    return updateReducer(basicStateReducer);
  }
  function basicStateReducer(state, action) {
    return typeof action === 'function' ? action(state) : action;
  }

  updateReducer()

  updateReducer的核心代码：

  // 15033
  funtion updateReducer() {
      var hook = updateWorkInProgressHook();
      var queue = hook.queue;
      var pendingQueue = queue.pending
      current.baseQueue = baseQueue = pendingQueue;
      queue.pending = null;
      var first = baseQueue.next;
      var newState = current.baseState;
      var update = first;
      if (update.eagerReducer === reducer) {
        newState = update.eagerState;
      } 
      hook.memoizedState = newState;
      hook.baseState = newBaseState;
      var dispatch = queue.dispatch;
      return [hook.memoizedState, dispatch]; // 返回['queen', dispatch]
  }

  （1）第一步执行updateWorkInProgressHook()，获取当前正在工作中的 hook

  // 14941
  function updateWorkInProgressHook() {
    // 此时currentlyRenderingFiber$1.memoizedState，但是为fiber的副本，保留着fiber.memoizedState的内容
    // 核心代码
     var nextCurrentHook;
    if (currentHook === null) { // 第一次useState
      var current = currentlyRenderingFiber$1.alternate;
      if (current !== null) {
        nextCurrentHook = current.memoizedState;
      } else {
        nextCurrentHook = null;
      }
    } else {
      nextCurrentHook = currentHook.next;
    }
    var nextWorkInProgressHook;
    if (workInProgressHook === null) { // 第一次useState
      nextWorkInProgressHook = currentlyRenderingFiber$1.memoizedState;
    } else {
      nextWorkInProgressHook = workInProgressHook.next;
    }
    currentHook = nextCurrentHook;
    var newHook = {
      memoizedState: currentHook.memoizedState,
      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,
      next: null
    }
    if (workInProgressHook === null) {
      currentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;
    } else {
      workInProgressHook = workInProgressHook.next = newHook;
    }
    return workInProgressHook
  }

  第一次const [name, setName] = useState('king')，workInProgressHook的值为

  workInProgressHook={
      memoizedState: "king",
      baseState: "king",
      queue:{
          pending:{
              action: "queen",
              eagerState: "queen",
          }
      },
      next: null
  }

  第二次const [count, setCount] = useState(0)，workInProgressHook的值为

  workInProgressHook={
      memoizedState: 0,
      baseState: 0,
      queue:{
          pending:{
              action: 0,
              eagerState: 0,
          }
      },
      next: null
  }

  （2）从workInProgressHook的数据结构可以看出，我们需要更新的值就在queue.pending.eagerState/action中

  if (update.eagerReducer === reducer) {
     newState = update.eagerState;
  } 

  （3）更新state

  hook.memoizedState = newState;
  hook.baseState = newBaseState;
  var dispatch = queue.dispatch;
  return [hook.memoizedState, dispatch]; // 返回['queen', dispatch]

  将'queen'赋值给hook.memoizedState，返回['queen', diapatch]，此时的name已经更新为'queen'

由上述源码可知，useState按顺序执行的原因是，useState是通过next来查找下一个hooks