React Hook之useState、useReducer的使用和源码分析

r囧r小猫 2023-03-14 13:12 11阅读 0赞

## React Hook ##

**16.8以前**  
一般使用类组件或者函数组件；

前者有完整的生命周期API，可以管理组件状态，但是this指向在使用时需要格外注意一；一般通过HOC实现复用；通过shouldComponentUpdate()或者PureComponent组件进行性能优化，防止不必要的更新。

后者是函数组件，一般是传入的数据进行展示，没有生命周期，只有props,是无状态组件；

**16.8以后**  
新增了React Hook特性，它是函数组件，但是通过hook钩子可以管理内部状态，而且可以调用生命周期；通过钩子的依赖项还可以控制组件更新时机；还可以通过自定义hook抽出部分逻辑进行复用；基本上可以算是以上两者的结合升级；

> 1.  只能在顶层调用hook，因为react里通过链表来记录hook，靠着hook的调用顺序的值state对应的setState，所以要确保每次渲染组件hook的顺序一致
> 2.  只能在函数组件中，或者自定义hook中使用；

--------------------

## useState的使用 ##

useState是用来定义和维护函数组件state的钩子，算是用来替代class组件里的constructor构造函数。

### 1. 定义state ###

该方法接受一个可选初始state值；可以是一个变量，可以是一个有返回值的方法。  
返回一个数组，通过数组结构方式得到state名和更新state的方法(名称都是任意指定的，语义清晰即可)；

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

// js里使用
    const [list, setList] = useState([]);
    const [count, setCount] = useState(() => { return value});

// ts里使用,指定类型
    const [value, setValue]: [string, any] = useState('');
    // 通过泛型指定
    const [loading, setLoading] = useState<boolean>(false);

### 2. 读取state ###

通过定义时指定的state变量名直接引用即可

<div>{ count}</div>

### 3. 更新state ###

通过定义state时指定的更新方法并传入新值即可

<div onClick={ () => { setCount(count + 1)}}>{ count}</div>

## useState的源码分析 ##

> hooks是存储在fiber实例memoizedState属性上的一个链表；

找到useState对外暴露的API（ReactHook.js专门导出hook的文件）

export function useState<S>(initialState: (() => S) | S) { 
      const dispatcher = resolveDispatcher();
      return dispatcher.useState(initialState);
    }

`resolveDispatcher`是什么呢？

// ReactHooks.js
    function resolveDispatcher() { 
      const dispatcher = ReactCurrentDispatcher.current;
      // 一些警告提示
      return dispatcher;
    }

所以这些hook都是在`ReactCurrentDispatcher.current`上的属性；  
再来看看`ReactCurrentDispatcher`的定义；

// ReactCurrentDispatcher.js
    const ReactCurrentDispatcher = { 
      /** * @internal * @type {ReactComponent} */
      current: (null: null | Dispatcher),
    };

知道了`ReactCurrentDispatcher`的结构后，我们来找一下`ReactCurrentDispatcher.current`是在什么时候赋值的；

// ReactFiberHooks.js
    function renderWithHooks(
      current: Fiber | null,
      workInProgress: Fiber,
      Component: any,
      props: any,
      refOrContext: any,
      nextRenderExpirationTime: ExpirationTime,
    ): any { 
      // ...
      nextCurrentHook = current !== null ? current.memoizedState : null;
      // 省略一些提示和_DEV_的配置
      ReactCurrentDispatcher.current =
          nextCurrentHook === null
            ? HooksDispatcherOnMount
            : HooksDispatcherOnUpdate;
    }

再来看看`HooksDispatcherOnMount`和`HooksDispatcherOnUpdate`分别是什么

const HooksDispatcherOnMount: Dispatcher = { 
      readContext,
      useCallback: mountCallback,
      useContext: readContext,
      useEffect: mountEffect,
      useImperativeHandle: mountImperativeHandle,
      useLayoutEffect: mountLayoutEffect,
      useMemo: mountMemo,
      useReducer: mountReducer,
      useRef: mountRef,
      useState: mountState,
      useDebugValue: mountDebugValue,
    };
    const HooksDispatcherOnUpdate: Dispatcher = { 
      readContext,
      useCallback: updateCallback,
      useContext: readContext,
      useEffect: updateEffect,
      useImperativeHandle: updateImperativeHandle,
      useLayoutEffect: updateLayoutEffect,
      useMemo: updateMemo,
      useReducer: updateReducer,
      useRef: updateRef,
      useState: updateState,
      useDebugValue: updateDebugValue,
    };

所以这部分逻辑如下图  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70][]接下来分别看一下mountState和updateState的实现  
首先熟悉几个类型

// hook链表节点属性，next指向下一个hook
    type Hook = { 
      memoizedState: any,
      baseState: any,
      baseUpdate: Update<any, any> | null,
      queue: UpdateQueue<any, any> | null,
      next: Hook | null,
    };

**mountState**

// mountState接收一个初始state 可以是一个固定值，也可以是一个带返回值的方法；
    // 返回一个数组，[state， dispatch方法]
    function mountState<S>(
      initialState: (() => S) | S,
    ): [S, Dispatch<BasicStateAction<S>>] { 
      // 在mount** hook 时候，都要先调用这个方法
      // 往hook链表里追加一个hook
      // 所以挂载组件时会根据useState的定义的顺序维护一个hook链表
      const hook = mountWorkInProgressHook();
      // 传入的是函数，则执行一下
      if (typeof initialState === 'function') { 
        initialState = initialState();
      }
      // 把初始值存起来
      hook.memoizedState = hook.baseState = initialState;
      // 新建一个队列
      const queue = (hook.queue = { 
        last: null,
        dispatch: null,
        lastRenderedReducer: , // 注意这里，其实就是包了一层的方法，内部执行或者返回initialState
        lastRenderedState: (initialState: any),
      });
      // 绑定一下当前fiber和queue队列
      const dispatch: Dispatch<BasicStateAction<S>,> = (queue.dispatch = (dispatchAction.bind(
        null,
        ((currentlyRenderingFiber: any): Fiber),
        queue,
      ): any));
      return [hook.memoizedState, dispatch];
    }

所以感觉最重要的终于来了，`dispatchAction`的操作很重要，来研究一下这个方法做了什么  
这个方法在`mountState和mountReducer`里都调用了，由代码可知，两者只是对数据处理上不太一样，其他处理流程是相同的

dispatchAction好长。。。。。。把一些提示信息什么的删一下

function dispatchAction<S, A>(
      fiber: Fiber,
      queue: UpdateQueue<S, A>,
      action: A,
    ) { 
      const alternate = fiber.alternate;
      // 当前正在render的组件，更新任务放到当前更新队列尾部
      if (
        fiber === currentlyRenderingFiber ||
        (alternate !== null && alternate === currentlyRenderingFiber)
      ) { 
        // 好像是调度相关的处理
        // 在渲染阶段
        didScheduleRenderPhaseUpdate = true;
        const update: Update<S, A> = { 
          expirationTime: renderExpirationTime,
          action,
          eagerReducer: null,
          eagerState: null,
          next: null,
        };
        if (renderPhaseUpdates === null) { 
          renderPhaseUpdates = new Map();
        }
        const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
        // 把mountState传进来的queue存到MAP里缓存起来， 以每个hook的queue对象为key
        if (firstRenderPhaseUpdate === undefined) { 
          renderPhaseUpdates.set(queue, update);
        } else { 
          // 把本次更新存入链表的后面
          let lastRenderPhaseUpdate = firstRenderPhaseUpdate;
          while (lastRenderPhaseUpdate.next !== null) { 
            lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
          }
          lastRenderPhaseUpdate.next = update;
        }
      } else { 
        flushPassiveEffects();
        const currentTime = requestCurrentTime();
        const expirationTime = computeExpirationForFiber(currentTime, fiber);
    
        const update: Update<S, A> = { 
          expirationTime,
          action,
          eagerReducer: null,
          eagerState: null,
          next: null,
        };
        const last = queue.last;
        // 第一次调用useState的dispatch时
        if (last === null) { 
          // 生成一个环形链表
          update.next = update;
        } else { 
        // 再次调用dispatch时，此时first是第一次的update
          const first = last.next;
          if (first !== null) { 
            update.next = first;
          }
          // 本次的update
          last.next = update;
        }
        // queue的last指针指向update
        queue.last = update;
        if (
          fiber.expirationTime === NoWork &&
          (alternate === null || alternate.expirationTime === NoWork)
        ) { 
          // 当前queue为空，意味着我们可以在渲染阶段前计算下一个state的值，如果state值没发生改变，返回；
          const lastRenderedReducer = queue.lastRenderedReducer; // 调用dispatch传入的
          if (lastRenderedReducer !== null) { 
            let prevDispatcher;
            // ...
            try { 
               // 获取当前的state值
              const currentState: S = (queue.lastRenderedState: any);
              // 执行一下dispatch方法获取新的state值
              const eagerState = lastRenderedReducer(currentState, action);
              
              // 如果进入渲染阶段时还没有更改reducer，使用eager状态，无需再次调用reducer。
              update.eagerReducer = lastRenderedReducer;
              update.eagerState = eagerState;
              // 这里的值，useState比较state值是否更新用的是Object.is()
              if (is(eagerState, currentState)) { 
                // 如果state值没发生更新，退出，不重新渲染组件
                return;
              }
            }
          }
        }
        // 创建更新任务，渲染组件
        scheduleWork(fiber, expirationTime);
      }
    }

综上： 在初次挂载组件时，react根据useState的调用顺序维护了一个链表，返回的dispatch方法里会执行对应的更新任务， 执行dispatch后，判断当前hook里值的更新前后变化来触发重新渲染；

**updateState**  
接下来看看重新渲染时是如何处理的

// 果然useState本质就是useReducer，一种特例
    function updateState<S>(
      initialState: (() => S) | S,
    ): [S, Dispatch<BasicStateAction<S>>] { 
      return updateReducer(basicStateReducer, (initialState: any));
    }

咦，走的是updateReducer呢！果然两者本质是一样的

basicStateReducer是什么呢？

// 好吧，就是setState时传入的是方法就执行一下，不是方法就返回传入的值
    function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S { 
      return typeof action === 'function' ? action(state) : action;
    }

看到这里了，就把useReducer的相关源码一起过一遍吧

首先回顾一下useReducer的使用方法：  
一般用于管理数据结构较复杂，或者处理逻辑复杂的状态

// useReducer的使用跟redux使用类似，类型定义如下：
    useReducer<S, I, A>(
        reducer: (S, A) => S, // 接受state,action作为参数，返回一个新的state
        initialArg: I, // 初始值
        init?: (I) => S, // 处理initialArg的方法
      ): [S, Dispatch<A>], // 返回一个数组，state和dispatch；
      // Dispatch方法类型如下， 接受一个action对象作为参数
    type Dispatch<A> = A => void;

// useReducer使用 来自官网的没有趣的计数器例子
    const initialState = { count: 0};
    function reducer(state, action) { 
      switch (action.type) { 
        case 'increment':
          return { count: state.count + 1};
        case 'decrement':
          return { count: state.count - 1};
        default:
          throw new Error();
      }
    }
    function Counter() { 
      const [state, dispatch] = useReducer(reducer, initialState);
      return (
        <>
          Count: { state.count}
          <button onClick={ () => dispatch({ type: 'decrement'})}>-</button>
          <button onClick={ () => dispatch({ type: 'increment'})}>+</button>
        </>
      );
    }

继续看源码。。。  
**mountReducer**

function mountReducer<S, I, A>(
      reducer: (S, A) => S,
      initialArg: I,
      init?: I => S,
    ): [S, Dispatch<A>] { 
      // ...跟mountState的处理一样，只不过如果传了第三个方法参数，会执行处理一下initialArg而已
      const queue = (hook.queue = { 
        last: null,
        dispatch: null,
        lastRenderedReducer: reducer, // 这里跟useState不同，这里是传入的自定义的reducer方法
        lastRenderedState: (initialState: any),
      });
     // ...这里跟useState也是一样的，创建一个更新
     // 返回[state, dispatch方法]
      return [hook.memoizedState, dispatch];
    }

**updateReducer**  
继续updateReducer的环节，又是很长。。。。。。

function updateReducer<S, I, A>(
      reducer: (S, A) => S,
      initialArg: I,
      init?: I => S,
    ): [S, Dispatch<A>] { 
      // 获取当前正在工作的hook
      const hook = updateWorkInProgressHook();
      const queue = hook.queue;
      queue.lastRenderedReducer = reducer;
      //1. 重新渲染阶段，re-render渲染过程中又产生了新的更新
      if (numberOfReRenders > 0) {  // 表示re-render的次数
        const dispatch: Dispatch<A> = (queue.dispatch: any); // dispatch取得是queue中的dispatch
        if (renderPhaseUpdates !== null) { 
          // 渲染阶段存放在map中的链表
          const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
          if (firstRenderPhaseUpdate !== undefined) { 
            renderPhaseUpdates.delete(queue);
            let newState = hook.memoizedState;
            // 获取链表
            let update = firstRenderPhaseUpdate;
            do { 
              //执行更新， 直到全都处理完
              const action = update.action;
              newState = reducer(newState, action);
              update = update.next;
            } while (update !== null);
    
            //全局状态更新
            if (!is(newState, hook.memoizedState)) { 
              markWorkInProgressReceivedUpdate();
            }
            // 更新hook的state值
            hook.memoizedState = newState;
            if (hook.baseUpdate === queue.last) { 
              hook.baseState = newState;
            }
            queue.lastRenderedState = newState;
            // 返回新的state和dispatch（dispatch不变）
            return [newState, dispatch];
          }
        }
        return [hook.memoizedState, dispatch];
      }
    	// ...消化一下
    }

上面是更新过程中又产生了新的更新， 会循环执行更新，直到更新完为止，返回\[newState, dispatch方法\]

继续看只有一次update的情况

//最后也是返回了[newState, dispatch]
      const last = queue.last;
      const baseUpdate = hook.baseUpdate;
      const baseState = hook.baseState;
      let first;
      if (baseUpdate !== null) { 
        if (last !== null) { 
          last.next = null;
        }
        first = baseUpdate.next;
      } else { 
        first = last !== null ? last.next : null;
      }
      if (first !== null) { 
        let newState = baseState;
        let newBaseState = null;
        let newBaseUpdate = null;
        let prevUpdate = baseUpdate;
        let update = first;
        let didSkip = false;
        do { 
          const updateExpirationTime = update.expirationTime;
          if (updateExpirationTime < renderExpirationTime) { 
            if (!didSkip) { 
              didSkip = true;
              newBaseUpdate = prevUpdate;
              newBaseState = newState;
            }
            if (updateExpirationTime > remainingExpirationTime) { 
              remainingExpirationTime = updateExpirationTime;
            }
          } else { 
            if (update.eagerReducer === reducer) { 
              newState = ((update.eagerState: any): S);
            } else { 
            // 如果dispatch里传入的是方法
              const action = update.action; // 此时是传入的的回调函数
              newState = reducer(newState, action);
            }
          }
          prevUpdate = update;
          update = update.next;
        } while (update !== null && update !== first);
    
        if (!didSkip) { 
          newBaseUpdate = prevUpdate;
          newBaseState = newState;
        }
        if (!is(newState, hook.memoizedState)) { 
          markWorkInProgressReceivedUpdate();
        }
        // 取最新的值
        hook.memoizedState = newState;
        hook.baseUpdate = newBaseUpdate;
        hook.baseState = newBaseState;
        queue.lastRenderedState = newState;
      }
      const dispatch: Dispatch<A> = (queue.dispatch: any);
      return [hook.memoizedState, dispatch];

hook的大概工作流程如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70]: /images/20230312/50e94459f0ce48019479bf1824f48143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 1]: /images/20230312/87c5d96687314e849d789fd5c35e537d.png