返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React中useEffect 与 useLayoutEffect的区别
  • 132
分享到

React中useEffect 与 useLayoutEffect的区别

2024-04-02 19:04:59 132人浏览 独家记忆
摘要

目录前置知识 useEffect commitBeforeMutationEffects commitMutationEffects commitLayoutEffects 后续阶段

前置知识

我们可以将 React 的工作流程划分为几大块:

  1. render 阶段:主要生成 Fiber节点 并构建出完整的 Fiber树
  2. commit 阶段:在上一个render 阶段中会在 rootFiber 上生成一条副作用链表,应用的DOM操作就会在本阶段执行

commit阶段的工作主要分为三部分,对应到源码中的函数名是:

  • commitBeforeMutationEffects阶段:主要处理执行DOM操作前的一些相关操作
  • commitMutationEffects阶段:执行DOM操作
  • commitLayoutEffects阶段:主要处理执行DOM操作后的一些相关操作

useEffect 和 useLayoutEffect 的区别主要就在体现在这三个阶段的处理上。结论是:useEffect 会异步地去执行它的响应函数和上一次的销毁函数,而useLayoutEffect 会同步地执行它的响应函数和上一次的销毁函数,即会阻塞住 DOM渲染。

useEffect

commitBeforeMutationEffects

在这个阶段中 useEffect 着重会经历一句话如下:


function commitBeforeMutationEffects() {
  while (nextEffect$1 !== null) {
    // 一系列的赋值操作省略,这里的flags应取自对应FunctionComponent的effect的flags,具体实现请看源码
    var flags = effect.flags;

  // 处理生命周期
    if ((flags & Snapshot) !== NoFlags) {
      setCurrentFiber(nextEffect$1);
      commitBeforeMutationLifeCycles(current, nextEffect$1);
      resetCurrentFiber();
    }

 // 这个if判断只有 useEffect 为 true,useLayoutEffect 为false
    if ((flags & Passive) !== NoFlags) {
      // If there are passive effects, schedule a callback to flush at
      // the earliest opportUnity.
      if (!rootDoesHavePassiveEffects) {
        rootDoesHavePassiveEffects = true;
 // 这里就是 useEffect 异步的原因,DOM操作后React会调度 flushPassiveEffects
        scheduleCallback(NORMalPriority, function () {
          flushPassiveEffects();
          return null;
        });
      }
    }

    nextEffect$1 = nextEffect$1.nextEffect;
  }
}

commitMutationEffects

在这个阶段中,React 会进行一系列的DOM节点更新 ,然后会执行一个方法: commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);

那么一个拥有 useEffect 的 Functional Component 在这个阶段是不符合 unmount 的判断逻辑的,所以在这个地方不会做 unmount 操作。

commitLayoutEffects

在这个阶段中,依然有一个很重要的方法存在:commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);

这个if判断和上一阶段的if判断是一样的,useEffec 在这个判断中不会做任何操作。

后续阶段

在完成了 commitLayoutEffects 后,还有一个操作:


if (rootDoesHavePassiveEffects) {
    // This commit has passive effects. Stash a reference to them. But don't
    // schedule a callback until after flushing layout work.
    rootDoesHavePassiveEffects = false;
    rootWithPendingPassiveEffects = root;
    pendingPassiveEffectsLanes = lanes;
    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
  }

即把 rootWithPendingPassiveEffects 置为 root ,这么做的原因和第一阶段 commitBeforeMutationEffects 中 useEffect 注册的下一次 flushPassiveEffects 异步调度有关,我们看以下 flushPassiveEffects 的实现:


function flushPassiveEffectsImpl() {
 if (rootWithPendingPassiveEffects === null) {
    return false;
  }
 // 省略一系列的性能追踪等操作
 commitPassiveUnmountEffects(root.current);
  commitPassiveMountEffects(root, root.current);
}


从上述代码段可以看见,useEffect 在第一阶段注册的调度回调会在页面更新后进行 unmount 和 mount 操作。值得一提的是,这个回调中effect的注册时机就是在 commitLayoutEffects 阶段。

useLayoutEffect

其实根据我们对 useEffect 的解析来看,就是在 commitMutationEffects 和 commitLayoutEffects 阶段中各自的 if 判断中,useLayoutEffect 是通过if判断的,所以在 commitMutationEffects 阶段中,同步执行了useLayoutEffect 的上一次销毁函数,在 commitLayoutEffects 阶段中,同步执行了 useLayoutEffect 本次的执行函数,并注册上销毁函数。

结论

至此,我们粗略地查看了 commit 阶段的代码,分析了以下为什么 useEffect 是异步执行,而 useLayoutEffect 是同步执行,具体的代码我没有太过在文章中贴出来,因为这些都是可变的,真正的流程性的概览和 React 团队设计这一套机制的心智模型需要我们自己在不断调试代码和理解中慢慢去熟悉。

后续自己感兴趣的是 hooks 的实现,其中比较关键的 useReducer 会着重看一下源码,看看能不能写个简易版本的放到支付宝小程序中去实现一个 自定义的支付宝hooks 用于日常生产力开发

到此这篇关于React中useEffect 与 useLayoutEffect的区别的文章就介绍到这了,更多相关React useEffect useLayoutEffect内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: React中useEffect 与 useLayoutEffect的区别

本文链接: https://www.lsjlt.com/news/131081.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • React中useEffect 与 useLayoutEffect的区别
    目录前置知识 useEffect commitBeforeMutationEffects commitMutationEffects commitLayoutEffects 后续阶段...
    99+
    2024-04-02
  • React useEffect的理解与使用
    目录避免重复循环渲染 关于副作用的清除 React16.8新增的useEffec这个hook函数就是处理副作用的。 所谓的“副作用”,举个通俗一点的例子,假如感冒了本来吃点药就没事了...
    99+
    2024-04-02
  • vue与react的区别
    vue与react的区别是:1.监听数据变化的实现原理不同;2.数据流的不同;3.组合不同功能的方式不同;4.框架本质不同;5.模板渲染方式的不同;6.渲染过程不同等。具体如下:监听数据变化的实现原理不同,vue是通过getter/sett...
    99+
    2024-04-02
  • React中hook函数与useState及useEffect的使用
    目录1. 简介2. useState使用3. useEffect使用useEffect发起网络请求1. 简介 在 React 的世界中,有容器组件和 UI 组件之分,在 React ...
    99+
    2024-04-02
  • React-hooks中的useEffect使用步骤
    目录1.理解函数副作用什么是副作用常见的副作用2.基础使用使用步骤示例代码3.依赖项控制useEffect 永远是在 DOM渲染完成之后执行 1.理解函数副作用 什么是副作用 对于R...
    99+
    2024-04-02
  • react中value与defaultValue的区别及说明
    目录react中value与defaultValue的区别react select标签defaultValue和value踩坑日记第一版本第二版第三版总结react中value与de...
    99+
    2023-05-20
    react中value react中defaultValue value与defaultValue的区别
  • React中State与Props区别和用法
    本篇内容介绍了“React中State与Props区别和用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2024-04-02
  • angular与react的区别有哪些
    这篇文章主要介绍了angular与react的区别有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇angular与react的区别有哪些文章都会有所收获,下面我们一起来看看...
    99+
    2024-04-02
  • vue与react的区别有哪些
    vue与react的区别:1、vue与react两者监听数据变化的实现原理不同;2、vue能够支持双向绑定,而react不能支持;3、vue组合不同功能的方式是通过mixin,而react则是HoC高阶组件实现;4、在组件通信中子组件向父组...
    99+
    2024-04-02
  • react中useEffect闭包的示例分析
    这篇文章主要介绍react中useEffect闭包的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!问题代码看一段因为useEffect导致的闭包问题代码const btn = u...
    99+
    2023-06-15
  • React与Angular有哪些区别
    这篇文章主要介绍“React与Angular有哪些区别”,在日常操作中,相信很多人在React与Angular有哪些区别问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Reac...
    99+
    2024-04-02
  • react中的watch监视属性-useEffect介绍
    目录react的watch监视属性-useEffectuseEffect使用指南最基本的使用响应更新如何处理Loading和Error处理表单自定义hooks使用useReducer...
    99+
    2024-04-02
  • 使用React与Vue的区别有哪些
    这篇文章主要介绍“使用React与Vue的区别有哪些”,在日常操作中,相信很多人在使用React与Vue的区别有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”使用Reac...
    99+
    2024-04-02
  • PHP 函数与 React Native 函数的区别
    PHP 函数与 React Native 函数的区别 简介 PHP 函数和 React Native 函数在语法和使用方式方面存在一些关键区别。本文将探讨这些差异,并通过实际示例来进一...
    99+
    2024-04-24
    php 作用域
  • react与vue的虚拟dom有哪些区别
    本篇内容主要讲解“react与vue的虚拟dom有哪些区别”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react与vue的虚拟dom有哪些区别”吧! ...
    99+
    2024-04-02
  • React中useEffect与生命周期钩子函数的对应关系说明
    目录React useEffect与生命周期钩子函数的对应关系使用格式一:不带参数的情况使用格式二:带第二个参数,参数为空数组使用格式三:带第二个参数,并且指定了依赖项使用格式四:依...
    99+
    2024-04-02
  • react native和react的区别有哪些
    这篇文章主要介绍react native和react的区别有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!区别:1、React是驱动html dom渲染; React Native是驱动android/ios原生...
    99+
    2023-06-06
  • java中“/”与“%”的区别
    区别:%是求模运算符,/是除运算符。%是求余运算,/是普通的除号。实例:System.out.println(3/5) = 0; System.out.println(2/5) = 0; System.out.println(4/5) ...
    99+
    2020-06-30
    java入门 java / % 区别
  • mybatis 中 #与$ 的区别?
    #表示的是使用了预编译,可以防止sql注入。而$则不是。使用#将传入的参数默认为字符串。而$则不会,传入的是什么就是什么。$一般用于传入数据库对象,例如表名。如果传入的是Date类型,则要用#。ps:在使用...
    99+
    2024-04-02
  • python中/与//的区别
    python中“/”表示为浮点数的除法,其返回结果为浮点数;而“//”表示的是整数除法,其返回结果为整数。实例:print("6 // 4 = " + str(6 // 4))print("6 / 4 =" + str(6 / 4))输出结...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作