涉及到的数据结构有哪些？

首次加载时，hooks 相关的代码都做了什么？

• 具体创建hook 的代码是什么逻辑？

  function mountWorkInProgressHook(): Hook {
    const hook: Hook = {
      memoizedState: null,
  
      baseState: null,
      queue: null,
      baseUpdate: null,
  
      next: null,
    };
  
    if (workInProgressHook === null) {
      firstWorkInProgressHook = workInProgressHook = hook;
    } else {
      workInProgressHook = workInProgressHook.next = hook;
    }
    return workInProgressHook;
  }
  

  创建一个hook，并将其设置为全局变量 workInProgressHook ，同时维护一个hooks 链表，每次都把新创建的hook 放在这个链表的最后。

useState 和 useReducer 系列的hooks 可以返回一个更改hooks 状态的callback，这里的状态更新是咋实现的，有没有race condition？

useState 其实就是特殊情况下的 useReducer ，两者返回的callback 其实就是首次加载中bind 到 hook.queue.dispatch 上的dispatch 函数。

react render 的时候是怎么知道此时是mount 还是update？

根据当前fiber 是否为null 来判断。

在首次加载后，再次调用hooks 发生了什么？

首次加载之后的hooks 就是update 系列的hooks 了，再拿 useState 和 useReducer 来看， useState 会直接调用 updateReducer ，而首次加载后的 useReducer 就是 updateReducer 。

当 updateReducer 被调用时，其会判断当前是否处于re-render 阶段，如果是，按我们上面说的一样，去找key 为queue 的map，取出update 事件链表，计算出新的state。

如果不是re-render 阶段，那么就遍历queue 里面的update ，计算出新的state。

不过这里要注意一下特殊情况，会有资源不足而跳过一些update 的情况，参照上文*memorizedState 和baseState 有可能不同吗？* 这个问题。

• 调用hook 后，具体被操作的hook 是怎么被拿到的？

  function updateWorkInProgressHook(): Hook {
    if (nextWorkInProgressHook !== null) {
      // There's already a work-in-progress. Reuse it.
      workInProgressHook = nextWorkInProgressHook;
      nextWorkInProgressHook = workInProgressHook.next;
  
      currentHook = nextCurrentHook;
      nextCurrentHook = currentHook !== null ? currentHook.next : null;
    } else {
      // Clone from the current hook.
      currentHook = nextCurrentHook;
  
      const newHook: Hook = {
        memoizedState: currentHook.memoizedState,
  
        baseState: currentHook.baseState,
        queue: currentHook.queue,
        baseUpdate: currentHook.baseUpdate,
  
        next: null,
      };
  
      if (workInProgressHook === null) {
        workInProgressHook = firstWorkInProgressHook = newHook;
      } else {
        workInProgressHook = workInProgressHook.next = newHook;
      }
      nextCurrentHook = currentHook.next;
    }
    return workInProgressHook;
  }
  

  先看一看有没有workInProgressHook，如果有的话，直接使用，如果没有，从之前留着的hooks 链表里面拷贝需要的hook 出来，这样的结果就是每次re-render 完之后，都多了一个新版本的hooks 链表，我猜这里可能和fiber 涉及到的调解算法有关。

useEffect 的实现？

function commitHookEffectList(
  unmountTag: number,
  mountTag: number,
  finishedWork: Fiber,
) {
  const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQuere: any);
  let lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      if ((effect.tag & unmountTag) !== NoHookEffect) {
        // Unmount
        const destory = effect.destroy;
        effect.destory = undefined;
        if (destory !== undefined) {
          destory();
        }
      }
	    if ((effect.tag & mountTag) !== NoHookEffect) {
	      // Mount
        const create = effect.create;
        effect.destory = create();
	    }
      effect = effect.next;
    } whlie (effect !== firstEffect);
  }
}

这里可以发现，effect 的链表始终是循环链表，因为effect 一旦mount 了之后数量就是恒定的，永远不会受到其他事件的影响，所以每次从 lastEffect.next 走起就好了。

useState 和 useEffect 有何不同？

• useState 是在fiber 里面创建初始状态，然后返回一个callback 让用户来schedule 新一轮的re-render。
• useEffect 是在fiber 里面创建初始状态，然后在每次fiber commit 之后（render 完成之后），依次执行一些副作用操作。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-umykITuK-1644039451267)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7d16a0c5-e596-41a7-b913-d228b5dd19db/Untitled.png)]

update 的expirationTime 是何时计算的？有何作用？

是在创建update 的时候就决定的，用来帮助fiber 确定update 的优先级，fiber 因为其充分利用device 资源的特性，会根据当前的资源来决定是否进行当前的update，如果资源不足，则跳过，记录被跳过的第一个update 为 baseUpdate 待之后又获得资源后从 baseUpdate 重新更新。

talk about fiber

这可能是最通俗的 React Fiber(时间分片) 打开方式

• 啥是fiber

  解读一：fiber 相当于是react 中的协程。因为协程之间是主动协调任务的，所以其实react 无法对fiber 进行抢占式调度，全凭使用者的自觉，一般fiber 会主动检查是否超过了浏览器给的运行时间，如果超过就保存现场，把控制权还给浏览器（一般来说这个运行时间是16ms，1000ms / 60）。

  解读二：react 中的执行单元，每执行完一个fiber 就检查一下剩余时间。

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NzUEiDLE-1644039451268)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3fc0f219-6bea-4400-a886-60e57ae173be/Untitled.png)]