从React源码分析看useEffect

热身准备

这里不再讲useLayoutEffect，它和useEffect的代码是一样的，区别主要是：

• 执行时机不同；
• useEffect是异步， useLayoutEffect是同步，会阻塞渲染；

初始化 mount

mountEffect

在所有hook初始化时都会通过下面这行代码实现hook结构的初始化和存储，这里不再讲mountWorkInProgressHook方法

var hook = mountWorkInProgressHook();
1

在mountEffect方法中，只有这几行代码。先来解读下几个参数：

• fiberFlags：有副作用的更新标记，用来标记hook所在的fiber；
• hookFlags：副作用标记；
• create：使用者传入的回调函数；
• deps：使用者传入的数组依赖；

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
   
  // hook初始化
  var hook = mountWorkInProgressHook();
  // 判断是否有传入deps，如果有会作为下次更新的deps
  var nextDeps = deps === undefined ? null : deps;
  // 给hook所在的fiber打上有副作用的更新的标记
  currentlyRenderingFiber$1.flags |= fiberFlags;
  // 将副作用操作存放到fiber.memoizedState.hook.memoizedState中
  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, undefined, nextDeps);
}
1
2
3
4
5
6
7
8
9
10
11

上面代码中都有注释，接下来我们看看React是如何存放副作用更新操作的，主要就是pushEffect方法

function pushEffect(tag, create, destroy, deps) {
   
  // 初始化副作用结构，
  var effect = {
   
    tag: tag,
    create: create,   // 回调函数
    destroy: destroy,  // 回调函数里的return（mount时是undefined）
    deps: deps,    // 依赖数组
    // 闭环链表
    next: null
  };
  // 下面的一大段代码看着复杂，但是有没有很熟悉的感觉？
  var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;

  if (componentUpdateQueue === 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15