React源码系列（七）—— useEffect

030

前言

想必各位React使用者，平时开发中除了useState外，使用最多的莫过于useEffect了，因为我们经常需要使用useEffect处理各种副作用，绑定/解绑时间、添加/消除定时器、发起请求等。本文就带着各位一步一步了解整个useEffect执行过程。

effects

到目前为止effect hooks其实已经有3种了，分别是useInsertionEffect、useLayoutEffect以及useEffect。

useInsertionEffect主要面向库（css in js）开发者使用的，不是我们今天的主角。这里重点将useLayoutEffect和useEffect。

我们都知道useLayoutEffect的执行是在useEffect之前的，而且effect hooks的执行都会在dom挂载完成之后，这样能保证在effect hooks中拿到真实dom，进行各种副作用操作。那么React又是如何保证以上这些的呢？其实主要得益于事件循环机制，我们来看下图。

// 例子代码
const Demo = () => {
  // useEffect1
  useEffect(() => {}, []);
  
  useLayoutEffect(() => {}, []);
  // useEffect2
  useEffect(() => {}, []);
  
  return (<div>demo</div>)
};
// 例子代码
const Demo = () => {
  // useEffect1
  useEffect(() => {}, []);
  
  useLayoutEffect(() => {}, []);

  // useEffect2
  useEffect(() => {}, []);
  
  return (<div>demo</div>)
};
// 例子代码
const Demo = () => {
  // useEffect1
  useEffect(() => {}, []);
  
  useLayoutEffect(() => {}, []);

  // useEffect2
  useEffect(() => {}, []);
  
  return (<div>demo</div>)
};

effects.png

可以看到，只要是useEffect都会扔到宏任务中，useLayoutEffect会扔到微任务中，而React执行commitRoot的那些诸如appendChild等操作是在主队列中的，因此确保了上述说的那几个点。

effect hook执行

其实effect hooks的执行是非常简单的，短短几十行代码就能了解清楚。

// 可先忽略HookPassive这两个参数，对于在此处对effect hooks的执行无太多作用
// PassiveEffect是一个标识，表示之后要执行这个effect函数
function mountEffect(create, deps) {
    return mountEffectImpl(Passive, HookPassive, create, deps);
}
// 可先忽略HookLayout这两个参数，对于在此处对effect hooks的执行无太多作用
// UpdateEffect是一个标识，表示之后要执行这个effect函数
function mountLayoutEffect(create, deps) {
    return mountEffectImpl(Update, HookLayout, create, deps);
}
function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
    // mountWorkInProgressHook作用是初始化一个hook，生成一个有基本hook属性的对象
    const hook = mountWorkInProgressHook();
    // effect hooks的依赖数组
    const nextDeps = deps === undefined ? null : deps;
    // 可先忽略此步  给当前的函数组件fiber添加flags
    currentlyRenderingFiber.flags |= fiberFlags;
    hook.memoizedState = pushEffect(HookHasEffect | hookFlags, create, undefined, nextDeps);
}
/**
 * 添加effect链表
 * @date 2023-04-01
 * @param {any} tag effect的标签
 * @param {any} create 创建方法
 * @param {any} destroy 销毁方法
 * @param {any} deps 依赖数组
 * @returns effect
 */
function pushEffect(tag, create, destroy, deps) {
    const effect = {
        tag,
        create,
        destroy,
        deps,
        next: null,
    };
    // fiber的更新队列
    let componentUpdateQueue = currentlyRenderingFiber.updateQueue;
    if (componentUpdateQueue === null) {
        // createFunctionComponentUpdateQueue是构建fiber身上的hook链表
        componentUpdateQueue = createFunctionComponentUpdateQueue();
        currentlyRenderingFiber.updateQueue = componentUpdateQueue;
        componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
        // lastEffect永远指向最后一个effect
        const lastEffect = componentUpdateQueue.lastEffect;
        if (lastEffect === null) {
            componentUpdateQueue.lastEffect = effect.next = effect;
        } else {
            const firstEffect = lastEffect.next;
            lastEffect.next = effect;
            effect.next = firstEffect;
            componentUpdateQueue.lastEffect = effect;
        }
    }
    return effect;
}
// 可先忽略HookPassive这两个参数，对于在此处对effect hooks的执行无太多作用
// PassiveEffect是一个标识，表示之后要执行这个effect函数
function mountEffect(create, deps) {
    return mountEffectImpl(Passive, HookPassive, create, deps);
}

// 可先忽略HookLayout这两个参数，对于在此处对effect hooks的执行无太多作用
// UpdateEffect是一个标识，表示之后要执行这个effect函数
function mountLayoutEffect(create, deps) {
    return mountEffectImpl(Update, HookLayout, create, deps);
}

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
    // mountWorkInProgressHook作用是初始化一个hook，生成一个有基本hook属性的对象
    const hook = mountWorkInProgressHook();
    // effect hooks的依赖数组
    const nextDeps = deps === undefined ? null : deps;
    // 可先忽略此步  给当前的函数组件fiber添加flags
    currentlyRenderingFiber.flags |= fiberFlags;
    hook.memoizedState = pushEffect(HookHasEffect | hookFlags, create, undefined, nextDeps);
}

/**
 * 添加effect链表
 * @date 2023-04-01
 * @param {any} tag effect的标签
 * @param {any} create 创建方法
 * @param {any} destroy 销毁方法
 * @param {any} deps 依赖数组
 * @returns effect
 */
function pushEffect(tag, create, destroy, deps) {
    const effect = {
        tag,
        create,
        destroy,
        deps,
        next: null,
    };
    // fiber的更新队列
    let componentUpdateQueue = currentlyRenderingFiber.updateQueue;
    if (componentUpdateQueue === null) {
        // createFunctionComponentUpdateQueue是构建fiber身上的hook链表
        componentUpdateQueue = createFunctionComponentUpdateQueue();
        currentlyRenderingFiber.updateQueue = componentUpdateQueue;
        componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
        // lastEffect永远指向最后一个effect
        const lastEffect = componentUpdateQueue.lastEffect;
        if (lastEffect === null) {
            componentUpdateQueue.lastEffect = effect.next = effect;
        } else {
            const firstEffect = lastEffect.next;
            lastEffect.next = effect;
            effect.next = firstEffect;
            componentUpdateQueue.lastEffect = effect;
        }
    }
    return effect;
}
// 可先忽略HookPassive这两个参数，对于在此处对effect hooks的执行无太多作用
// PassiveEffect是一个标识，表示之后要执行这个effect函数
function mountEffect(create, deps) {
    return mountEffectImpl(Passive, HookPassive, create, deps);
}

// 可先忽略HookLayout这两个参数，对于在此处对effect hooks的执行无太多作用
// UpdateEffect是一个标识，表示之后要执行这个effect函数
function mountLayoutEffect(create, deps) {
    return mountEffectImpl(Update, HookLayout, create, deps);
}

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
    // mountWorkInProgressHook作用是初始化一个hook，生成一个有基本hook属性的对象
    const hook = mountWorkInProgressHook();
    // effect hooks的依赖数组
    const nextDeps = deps === undefined ? null : deps;
    // 可先忽略此步  给当前的函数组件fiber添加flags
    currentlyRenderingFiber.flags |= fiberFlags;
    hook.memoizedState = pushEffect(HookHasEffect | hookFlags, create, undefined, nextDeps);
}

/**
 * 添加effect链表
 * @date 2023-04-01
 * @param {any} tag effect的标签
 * @param {any} create 创建方法
 * @param {any} destroy 销毁方法
 * @param {any} deps 依赖数组
 * @returns effect
 */
function pushEffect(tag, create, destroy, deps) {
    const effect = {
        tag,
        create,
        destroy,
        deps,
        next: null,
    };
    // fiber的更新队列
    let componentUpdateQueue = currentlyRenderingFiber.updateQueue;
    if (componentUpdateQueue === null) {
        // createFunctionComponentUpdateQueue是构建fiber身上的hook链表
        componentUpdateQueue = createFunctionComponentUpdateQueue();
        currentlyRenderingFiber.updateQueue = componentUpdateQueue;
        componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
        // lastEffect永远指向最后一个effect
        const lastEffect = componentUpdateQueue.lastEffect;
        if (lastEffect === null) {
            componentUpdateQueue.lastEffect = effect.next = effect;
        } else {
            const firstEffect = lastEffect.next;
            lastEffect.next = effect;
            effect.next = firstEffect;
            componentUpdateQueue.lastEffect = effect;
        }
    }
    return effect;
}

上面这段代码基本上就是effects hook的执行过程了，虽然他仅是mountHook。而在updateHook中，仅是对比下依赖数组是否一样，不一样就更新一下就将标识改一下，表示这个effect要执行。

useEffect就是这么简单，他没有大家想的那么神秘，看着功能如此强大的effect hooks，模拟了类式组件的各种生命周期函数，而他所做的事情竟只有这么点，仅仅是将接受到的函数（effect）扔进fiber的updateQueue中。

enqueue.png

updateQueue

useEffect能够模拟出类式组件的那么多种生命周期函数，其实精髓就在这个updateQueue中，所以我们其实真正要弄明白的是updateQueue是做什么的，而其中存的effects链表又什么时候会执行，上面代码中Passive、HookPassive、Update、HookLayout又发挥着怎样的作用。

Passive、HookPassive、Update、HookLayout

  • Passive、Update都是fiber的flag之一，它们都是一个普通的二进制数，它和之前那些文章中提到的更新、插入删除标识是一种东西，都是fiber的tag，标示要执行某种操作。

  • HookPassive、HookLayout是effect上的tag，他表示这个effect是useEffect接收的函数还是useLayoutEffect接收的函数。

updateQueue的执行

updateQueue被使用时，是在commitRoot阶段，我们来看commitRoot中一小段代码。

// 提交副作用
function commitRoot(root) {
    // finishedWork就是一个fiber
    // finishedWork.subtreeFlags & Passive，这个表达式就是为了校验fiber身上有没需要执行的useEffect收集的effects
    if ((finishedWork.subtreeFlags & Passive) !== 0
        || (finishedWork.flags & Passive) !== 0) {
        // 宏任务
        setTimeout(() => {
          // 这里表示的是一个函数，这个函数会将所有的effects进行一个过滤，这里会过滤出useEffect接收的effects，也就是含有HookPassive标识的effects
          effects(HookPassive);
        }, 0);
    }
    // 微任务
    queueMicrotask(() => {
      // 这里表示的是一个函数，这个函数会将所有的effects进行一个过滤，这里会过滤出useLayoutEffect接收的effects，也就是含有HookLayout标识的effects
      effects(HookLayout);
    });
}
// 提交副作用
function commitRoot(root) {
    // finishedWork就是一个fiber
    // finishedWork.subtreeFlags & Passive，这个表达式就是为了校验fiber身上有没需要执行的useEffect收集的effects
    if ((finishedWork.subtreeFlags & Passive) !== 0
        || (finishedWork.flags & Passive) !== 0) {
        // 宏任务
        setTimeout(() => {
          // 这里表示的是一个函数，这个函数会将所有的effects进行一个过滤，这里会过滤出useEffect接收的effects，也就是含有HookPassive标识的effects
          effects(HookPassive);
        }, 0);
    }
    // 微任务
    queueMicrotask(() => {
      // 这里表示的是一个函数，这个函数会将所有的effects进行一个过滤，这里会过滤出useLayoutEffect接收的effects，也就是含有HookLayout标识的effects
      effects(HookLayout);
    });
}
// 提交副作用
function commitRoot(root) {
    // finishedWork就是一个fiber
    // finishedWork.subtreeFlags & Passive，这个表达式就是为了校验fiber身上有没需要执行的useEffect收集的effects
    if ((finishedWork.subtreeFlags & Passive) !== 0
        || (finishedWork.flags & Passive) !== 0) {
        // 宏任务
        setTimeout(() => {
          // 这里表示的是一个函数，这个函数会将所有的effects进行一个过滤，这里会过滤出useEffect接收的effects，也就是含有HookPassive标识的effects
          effects(HookPassive);
        }, 0);
    }
    // 微任务
    queueMicrotask(() => {
      // 这里表示的是一个函数，这个函数会将所有的effects进行一个过滤，这里会过滤出useLayoutEffect接收的effects，也就是含有HookLayout标识的effects
      effects(HookLayout);
    });
}

通过上面这一小段commitRoot代码可以看到正如之前所说，useEffect被扔进宏任务中，useLayoutEffect被扔进微任务中，当开始执行这些微任务或者宏任务时，commitRoot已经执行完了，提交dom的操作结束了。

接下来我们再看看上面代码中所说的effects。

const effects = (flag) => {
    // 执行effect身上的destory函数，这个destory函数是只有执行过effect本身才会有值，所以mountEffect的时候是没有的，仅会在后续的updateEffect执行。
    commitUnmountEffects(flag);
    // 执行effect并更新/新增effect的destory
    commitMountEffects(flag);
};
const effects = (flag) => {
    // 执行effect身上的destory函数，这个destory函数是只有执行过effect本身才会有值，所以mountEffect的时候是没有的，仅会在后续的updateEffect执行。
    commitUnmountEffects(flag);
    // 执行effect并更新/新增effect的destory
    commitMountEffects(flag);
};
const effects = (flag) => {
    // 执行effect身上的destory函数，这个destory函数是只有执行过effect本身才会有值，所以mountEffect的时候是没有的，仅会在后续的updateEffect执行。
    commitUnmountEffects(flag);
    // 执行effect并更新/新增effect的destory
    commitMountEffects(flag);
};

上面这段代码执行effects也是比较容易的。

const commitUnmountEffects = (flag) => {
  const lastEffect = fiber.updateQueue.lastEffect;
  let curEffect = lastEffect.next;
  while (curEffect) {
    if (effect.tag & flag !== 0) {
      // effect hooks接收到的那个函数的返回值
      if (effect.destory) {
        effect.destorye();
      }
    }
    curEffect = curEffect.next;
  };
};
const commitMountEffects = (flag) => {
  const lastEffect = fiber.updateQueue.lastEffect;
  let curEffect = lastEffect.next;
  while (curEffect) {
    if (effect.tag & flag !== 0) {
      // effect hooks接收到的那个函数
      effect.destory = effect.create();
    }
    curEffect = curEffect.next;
  };
};
const commitUnmountEffects = (flag) => {
  const lastEffect = fiber.updateQueue.lastEffect;
  let curEffect = lastEffect.next;
  while (curEffect) {
    if (effect.tag & flag !== 0) {
      // effect hooks接收到的那个函数的返回值
      if (effect.destory) {
        effect.destorye();
      }
    }
    curEffect = curEffect.next;
  };
};
const commitMountEffects = (flag) => {
  const lastEffect = fiber.updateQueue.lastEffect;
  let curEffect = lastEffect.next;
  while (curEffect) {
    if (effect.tag & flag !== 0) {
      // effect hooks接收到的那个函数
      effect.destory = effect.create();
    }
    curEffect = curEffect.next;
  };
};
const commitUnmountEffects = (flag) => {
  const lastEffect = fiber.updateQueue.lastEffect;
  let curEffect = lastEffect.next;
  while (curEffect) {
    if (effect.tag & flag !== 0) {
      // effect hooks接收到的那个函数的返回值
      if (effect.destory) {
        effect.destorye();
      }
    }
    curEffect = curEffect.next;
  };
};
const commitMountEffects = (flag) => {
  const lastEffect = fiber.updateQueue.lastEffect;
  let curEffect = lastEffect.next;
  while (curEffect) {
    if (effect.tag & flag !== 0) {
      // effect hooks接收到的那个函数
      effect.destory = effect.create();
    }
    curEffect = curEffect.next;
  };
};

到此整个effect hooks的执行过程已经全部讲完了，下面是一张useEffect的流程图，这张流程图更多的是为了给调试结尾处的仓库的代码所使用。

useEffect.png

结尾

本文通过Demo组件例子讲述effect hooks的执行顺序，再通过Demo组件和部分简化过的源码讲述effect hooks都做了些什么并且引出真正的主角updateQueue，最后讲述updateQueue的执行时机以及如何执行。

读完本文，仅是理解effect hooks如何执行，以及原理是完全没问题的，但想要足够深的理解这些effect hooks，更推荐各位调试以下仓库的代码。

仅包含effect hooks的代码：点这里

完整版源码：点这里

上一篇：DOM-DIFF

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
前端
# 前端# JavaScript# React.js
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYAOStXE' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
文章目录
文章目录
热门推荐