从React源码分析看useEffect

最新推荐文章于 2024-06-22 20:21:31 发布

goClient1992

最新推荐文章于 2024-06-22 20:21:31 发布

阅读量347

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/It_kc/article/details/127743999

版权

本文详细分析了React Hooks中的useEffect，包括初始化mount、更新update的过程，以及如何执行副作用。在mount阶段，useEffect标记副作用并存储相关操作；在update阶段，updateEffect创建回调函数并根据依赖变化决定是否执行。副作用的执行是在commit阶段之后，通过微任务或宏任务异步进行。文章解答了useEffect和组件更新之间的关系，以及为何优先选择Promise实现异步。

摘要由CSDN通过智能技术生成

热身准备

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

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

初始化 mount

mountEffect

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

var hook = mountWorkInProgressHook();

在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);
}

上面代码中都有注释，接下来我们看看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 ===