react源码解析13.hooks源码

react源码解析13.hooks源码

视频讲解（高效学习）：进入学习

hook调用入口

​ 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate

ReactCurrentDispatcher.current = 
  current === null || current.memoizedState === null//mount or update
  ? HooksDispatcherOnMount
	: HooksDispatcherOnUpdate;  

const HooksDispatcherOnMount: Dispatcher = {//mount时
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  //...
};

const HooksDispatcherOnUpdate: Dispatcher = {//update时
  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useReducer: updateReducer,
  useRef: updateRef,
  useState: updateState,
  //...
};

hook数据结构

​ 在FunctionComponent中，多个hook会形成hook链表，保存在Fiber的memoizedState的上，而需要更新的Update保存在hook.queue.pending中

const hook: Hook = {
   
  memoizedState: null,//对于不同hook，有不同的值
  baseState: null,//初始state
  baseQueue: null,//初始queue队列
  queue: null,//需要更新的update
  next: null,//下一个hook
};

下面来看下memoizedState对应的值

• useState：例如const [state, updateState] = useState(initialState)，memoizedState等于state的值
• useReducer：例如const [state, dispatch] = useReducer(reducer, {});，memoizedState等于state的值
• useEffect：在mountEffect时会调用pushEffect创建effect链表，memoizedState就等于effect链表，effect链表也会挂载到fiber.updateQueue上，每个effect上存在useEffect的第一个参数回调和第二个参数依赖数组，例如，useEffect(callback, [dep])，effect就是{create:callback, dep:dep,…}
• useRef：例如useRef(0)，memoizedState就等于{current: 0}
• useMemo：例如useMemo(callback, [dep])，memoizedState等于[callback(), dep]
• useCallback：例如useCallback(callback, [dep])，memoizedState等于[callback, dep]。useCallback保存callback函数，useMemo保存callback的执行结果

useState&useReducer

之所以把useState和useReducer放在一起，是因为在源码中useState就是有默认reducer参数的useReducer。

• useState&useReducer声明

  ​ resolveDispatcher函数会获取当前的Dispatcher

  function useState(initialState) {
       
    var dispatcher = resolveDispatcher();
    return dispatcher.useState(initialState);
  }
  function useReducer(reducer, initialArg, init) {
       
    var dispatcher = resolveDispatcher();
    return dispatcher.useReducer(reducer, initialArg, init);
  }
  
  

• mount阶段

  ​ mount阶段useState调用mountState，useReducer调用mountReducer，唯一区别就是它们创建的queue中lastRenderedReducer不一样，mount有初始值basicStateReducer，所以说useState就是有默认reducer参数的useReducer。

  function mountState<S>(//
    initialState: (() => S) | S,
  ): [S, Dispatch<BasicStateAction<S>>] {
       
    const hook = mountWorkInProgressHook();//创建当前hook
    if (typeof initialState === 'function') {
       
      initialState = initialState();
    }
    hook.memoizedState = hook.baseState = initialState;//hook.memoizedState赋值
    const queue = (hook.queue = {
       //赋值hook.queue
      pending: null,
      dispatch: null,
      lastRenderedReducer: basicStateReducer,//和mountReducer的区别
      lastRenderedState: (initialState: any),
    });
    const dispatch: Dispatch<//创建dispatch函数
      BasicStateAction<S>,
    > = (queue.dispatch = (dispatchAction.bind(
      null