React hooks原理浅谈

react的工作流程

fiber是react的基本工作单元，所有的操作都要基于它实现。其实fiber就类似一个个element元素，react的工作流程其实就是遍历fiber tree。

performUnitOfWork函数会执行当前的fiber节点，然后把这个fiber的子节点赋值给workInProgress，当子节点不存在时，就把兄弟节点赋值给workInProgress。

上层的workLoopSync函数的 while循环会根据下个workInProgress去遍历。这样就能实现一个深度优先遍历，从而把所有的fiber执行完毕。

在performUnitOfWork函数中分为两个阶段：

1.beginWork

执行render函数以及hook，然后返回jsx
对返回的jsx执行diff，如果有新的fiber节点生成则赋值给workInProgress继续迭代

2.completeWork回溯fiber tree

生成dom节点，组成一个虚拟dom树
处理props
把所有含有副作用的fiber节点用firstEffect和lastEffect链接起来，组成一个链表，然后在commit阶段遍历执行

在completeWork执行到根节点时，证明所有的工作已经完成，就会执行commitRoot，它又分为三个阶段：

1.before mutation(执行dom操作前)

调用挂载前的生命周期钩子，比如getSnapshotBeforeUpdate，调度useEffect

2.mutation(执行dom操作)

执行dom操作，如果有组件被删除，那么还会调用componentWilUnmount或useLayoutEffect的销毁函数

3.layout(执行dom操作后)

切换fiber tree
调用componentDidUpdate、componentDidMount或者useLayoutEffect的回调函数。
layout结束后，执行之前调度的useEffect的创建和销毁函数。

接下来我们重点看下hook的实现。

useState不同阶段调用的方法不同

因而useState在mount时实际上调用的是mountState方法，update时调用的是updateState方法（updateState是updateReducer的语法糖写法）。

当mount阶段依次调用hook时，第一个生成的hook是挂在当前组件节点（reactFiber节点）的memoizedState属性上，之后生成的hook则依次挂在上一个hook的next属性上。

所以当我们将hook置于循环、条件语句、嵌套函数中时，那么hook链表就会错乱，会导致hook调用顺序不可预测，那就没法保证组件内部状态一致性。当我们setState时会返回一个初始state和用于更新state的函数。

我们知道mount阶段useState调用的是mountState，查看源码后知道返回的其实是[hook.memoizedState, dispatch]。

dispatch其实就是dispatchSetState通过bind到当前组件节点、更新队列后的函数。

假设执行了3次setOrder，分别是 setOrder('1')、setOrder('2')、setOrder('3')。

ini 复制代码

if (pending === null) {
  // This is the first update. Create a circular list.
  update.next = update;
} else {
  update.next = pending.next;
  pending.next = update;
}
queue.pending = update;

setOrder('1')时

setOrder('2') 时

setOrder('3')时

上面说过updte阶段实际调用的是updateReducer方法，这个方法中主要做了这几件事

如果有新的更新还未处理，则加入当前更新链表中
清空待更新链表（queue.pending = null）
从待更新链表的第一个循环迭代更新，直到最后一个
更新当前hook状态值并return出去

通过setOrder(1)、setOrder(2)、setOrder(3)的图例我们知晓 queue.pending.next 即更新链表的总是指向第一个update，而queue.pending总是指向最后一个。

一开始将update(1)赋值给update，然后获取newState也就是1，接下来update=update.next，此时update成了update(2)，依次遍历，终止条件为update === null || update === first，也就是当update = update(3)时满足了终止条件，此时newState = 3，取到了最新值。这样可以保证整个update链表都循环了一遍同时取到的是链表中的最后一个节点。所以无论setState多少次，拿到的总是最新的值（问题2）。

useEffect不同阶段调用的方法不同

mount阶段，useEffect调用的是mountEffect，update阶段，useEffect调用的是updateEffect函数。

无论useEffect的依赖项是否相同都会调用pushEffect函数，唯一区别的是pushEffect函数的第一个参数是不同的，如果依赖项没有变化则第一个参数是hookFlags，反之则是HookHasEffect|hookFlags（标识存在副作用更新钩子）。

pushEffect主要做两件事：

创建 effect 对象并返回
把这个 effect 链接到 currentlyRenderingFiber的updateQueue属性上

结论：useEffect会生成一个effect对象，保存在hook节点的memoizedState中，同时也更新到currentlyRenderingFiber的updateQueue中，组成循环链表。每次render时，都会对比一下新旧hook里保存的effect的deps有没有改变，如果改变了，那就更新memoizedState为最新的effect，并且把effect的tag标识为存在副作用，然后currentlyRenderingFiber的updateQueue属性里。在commit阶段，beforeMutation中，对有副作用的fiber，发起一个异步调度。等到layout结束后，这个异步调度的回调开始执行，处理effect的创建和销毁回调。它会先调用effect的destroy，再调用create。

（本文作者：尚军平）

关注公众号「哈啰技术」，第一时间收到最新技术推文。