Hook原理——状态Hook

Copy 
1function mountState<S>(
2  initialState: (() => S) | S,
3): [S, Dispatch<BasicStateAction<S>>] {
4  // 1. 创建hook
5  const hook = mountWorkInProgressHook();
6  if (typeof initialState === 'function') {
7    initialState = initialState();
8  }
9  // 2. 初始化hook的属性
10  // 2.1 设置 hook.memoizedState/hook.baseState
11  // 2.2 设置 hook.queue
12  hook.memoizedState = hook.baseState = initialState;
13  const queue = (hook.queue = {
14    pending: null,
15    dispatch: null,
16    // queue.lastRenderedReducer是内置函数
17    lastRenderedReducer: basicStateReducer,
18    lastRenderedState: (initialState: any),
19  });
20  // 2.3 设置 hook.dispatch
21  const dispatch: Dispatch<
22    BasicStateAction<S>,
23  > = (queue.dispatch = (dispatchAction.bind(
24    null,
25    currentlyRenderingFiber,
26    queue,
27  ): any));
28
29  // 3. 返回[当前状态, dispatch函数]
30  return [hook.memoizedState, dispatch];
31}

Copy 
1function mountReducer<S, I, A>(
2  reducer: (S, A) => S,
3  initialArg: I,
4  init?: I => S,
5): [S, Dispatch<A>] {
6  // 1. 创建hook
7  const hook = mountWorkInProgressHook();
8  let initialState;
9  if (init !== undefined) {
10    initialState = init(initialArg);
11  } else {
12    initialState = ((initialArg: any): S);
13  }
14  // 2. 初始化hook的属性
15  // 2.1 设置 hook.memoizedState/hook.baseState
16  hook.memoizedState = hook.baseState = initialState;
17  // 2.2 设置 hook.queue
18  const queue = (hook.queue = {
19    pending: null,
20    dispatch: null,
21    // queue.lastRenderedReducer是由外传入
22    lastRenderedReducer: reducer,
23    lastRenderedState: (initialState: any),
24  });
25  // 2.3 设置 hook.dispatch
26  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
27    null,
28    currentlyRenderingFiber,
29    queue,
30  ): any));
31
32  // 3. 返回[当前状态, dispatch函数]
33  return [hook.memoizedState, dispatch];
34}

Copy 
1function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
2  return typeof action === "function" ? action(state) : action;
3}

Copy 
1const [state, dispatch] = useState({ count: 0 });
2
3// 等价于
4const [state, dispatch] = useReducer(
5  function basicStateReducer(state, action) {
6    return typeof action === "function" ? action(state) : action;
7  },
8  { count: 0 }
9);
10
11// 当需要更新state时, 有2种方式
12dispatch({ count: 1 }); // 1.直接设置
13dispatch((state) => ({ count: state.count + 1 })); // 2.通过回调函数设置

Copy 
1import { useState } from "react";
2export default function App() {
3  const [count, dispatch] = useState(0);
4  return (
5    <button
6      onClick={() => {
7        dispatch(1);
8        dispatch(3);
9        dispatch(2);
10      }}
11    >
12      {count}
13    </button>
14  );
15}

Copy 
1function dispatchAction<S, A>(
2  fiber: Fiber,
3  queue: UpdateQueue<S, A>,
4  action: A,
5) {
6  // 1. 创建update对象
7  const eventTime = requestEventTime();
8  const lane = requestUpdateLane(fiber); // Legacy模式返回SyncLane
9  const update: Update<S, A> = {
10    lane,
11    action,
12    eagerReducer: null,
13    eagerState: null,
14    next: (null: any),
15  };
16
17  // 2. 将update对象添加到hook.queue.pending队列
18  const pending = queue.pending;
19  if (pending === null) {
20    // 首个update, 创建一个环形链表
21    update.next = update;
22  } else {
23    update.next = pending.next;
24    pending.next = update;
25  }
26  queue.pending = update;
27
28  const alternate = fiber.alternate;
29  if (
30    fiber === currentlyRenderingFiber ||
31    (alternate !== null && alternate === currentlyRenderingFiber)
32  ) {
33    // 渲染时更新, 做好全局标记
34    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
35  } else {
36    // ...省略性能优化部分, 下文介绍
37
38    // 3. 发起调度更新, 进入`reconciler 运作流程`中的输入阶段.
39    scheduleUpdateOnFiber(fiber, lane, eventTime);
40  }
41}

Copy 
1function updateState<S>(
2  initialState: (() => S) | S,
3): [S, Dispatch<BasicStateAction<S>>] {
4  return updateReducer(basicStateReducer, (initialState: any));
5}

Copy 
1function updateReducer<S, I, A>(
2  reducer: (S, A) => S,
3  initialArg: I,
4  init?: I => S,
5): [S, Dispatch<A>] {
6  // 1. 获取workInProgressHook对象
7  const hook = updateWorkInProgressHook();
8  const queue = hook.queue;
9  queue.lastRenderedReducer = reducer;
10  const current: Hook = (currentHook: any);
11  let baseQueue = current.baseQueue;
12
13  // 2. 链表拼接: 将 hook.queue.pending 拼接到 current.baseQueue
14  const pendingQueue = queue.pending;
15  if (pendingQueue !== null) {
16    if (baseQueue !== null) {
17      const baseFirst = baseQueue.next;
18      const pendingFirst = pendingQueue.next;
19      baseQueue.next = pendingFirst;
20      pendingQueue.next = baseFirst;
21    }
22    current.baseQueue = baseQueue = pendingQueue;
23    queue.pending = null;
24  }
25  // 3. 状态计算
26  if (baseQueue !== null) {
27    const first = baseQueue.next;
28    let newState = current.baseState;
29
30    let newBaseState = null;
31    let newBaseQueueFirst = null;
32    let newBaseQueueLast = null;
33    let update = first;
34
35    do {
36      const updateLane = update.lane;
37      // 3.1 优先级提取update
38      if (!isSubsetOfLanes(renderLanes, updateLane)) {
39        // 优先级不够: 加入到baseQueue中, 等待下一次render
40        const clone: Update<S, A> = {
41          lane: updateLane,
42          action: update.action,
43          eagerReducer: update.eagerReducer,
44          eagerState: update.eagerState,
45          next: (null: any),
46        };
47        if (newBaseQueueLast === null) {
48          newBaseQueueFirst = newBaseQueueLast = clone;
49          newBaseState = newState;
50        } else {
51          newBaseQueueLast = newBaseQueueLast.next = clone;
52        }
53        currentlyRenderingFiber.lanes = mergeLanes(
54          currentlyRenderingFiber.lanes,
55          updateLane,
56        );
57        markSkippedUpdateLanes(updateLane);
58      } else {
59        // 优先级足够: 状态合并
60        if (newBaseQueueLast !== null) {
61          // 更新baseQueue
62          const clone: Update<S, A> = {
63            lane: NoLane,
64            action: update.action,
65            eagerReducer: update.eagerReducer,
66            eagerState: update.eagerState,
67            next: (null: any),
68          };
69          newBaseQueueLast = newBaseQueueLast.next = clone;
70        }
71        if (update.eagerReducer === reducer) {
72          // 性能优化: 如果存在 update.eagerReducer, 直接使用update.eagerState.避免重复调用reducer
73          newState = ((update.eagerState: any): S);
74        } else {
75          const action = update.action;
76          // 调用reducer获取最新状态
77          newState = reducer(newState, action);
78        }
79      }
80      update = update.next;
81    } while (update !== null && update !== first);
82
83    // 3.2. 更新属性
84    if (newBaseQueueLast === null) {
85      newBaseState = newState;
86    } else {
87      newBaseQueueLast.next = (newBaseQueueFirst: any);
88    }
89    if (!is(newState, hook.memoizedState)) {
90      markWorkInProgressReceivedUpdate();
91    }
92    // 把计算之后的结果更新到workInProgressHook上
93    hook.memoizedState = newState;
94    hook.baseState = newBaseState;
95    hook.baseQueue = newBaseQueueLast;
96    queue.lastRenderedState = newState;
97  }
98
99  const dispatch: Dispatch<A> = (queue.dispatch: any);
100  return [hook.memoizedState, dispatch];
101}

Copy 
1function dispatchAction<S, A>(
2  fiber: Fiber,
3  queue: UpdateQueue<S, A>,
4  action: A,
5) {
6  // ...省略无关代码 ...只保留性能优化部分代码:
7
8  // 下面这个if判断, 能保证当前创建的update, 是`queue.pending`中第一个`update`. 为什么? 发起更新之后fiber.lanes会被改动(可以回顾`fiber 树构造(对比更新)`章节), 如果`fiber.lanes && alternate.lanes`没有被改动, 自然就是首个update
9  if (
10    fiber.lanes === NoLanes &&
11    (alternate === null || alternate.lanes === NoLanes)
12  ) {
13    const lastRenderedReducer = queue.lastRenderedReducer;
14    if (lastRenderedReducer !== null) {
15      let prevDispatcher;
16      const currentState: S = (queue.lastRenderedState: any);
17      const eagerState = lastRenderedReducer(currentState, action);
18      // 暂存`eagerReducer`和`eagerState`, 如果在render阶段reducer==update.eagerReducer, 则可以直接使用无需再次计算
19      update.eagerReducer = lastRenderedReducer;
20      update.eagerState = eagerState;
21      if (is(eagerState, currentState)) {
22        // 快速通道, eagerState与currentState相同, 无需调度更新
23        // 注: update已经被添加到了queue.pending, 并没有丢弃. 之后需要更新的时候, 此update还是会起作用
24        return;
25      }
26    }
27  }
28  // 发起调度更新, 进入`reconciler 运作流程`中的输入阶段.
29  scheduleUpdateOnFiber(fiber, lane, eventTime);
30}