juejin小册|react|17 useEffect 与 useLayoutEffect 区别在哪里？

最新推荐文章于 2024-04-01 00:09:44 发布
最新推荐文章于 2024-04-01 00:09:44 发布
阅读量136 收藏
点赞数 6
分类专栏： |Hadoop|R语言|操作系统| 数据库|云计算概论|计算机网络 前端八股文 文章标签： react.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/135855958
版权
本文详细介绍了React Hooks中useEffect和useLayoutEffect的区别，包括它们的共同点、使用方式、执行效果、使用场景和设计原理。尽管两者在使用方式上相似，但useEffect在渲染过程中的调用是异步的，适用于大多数场景，而useLayoutEffect则在所有DOM变更后同步调用，用于处理DOM操作和避免页面闪烁。了解它们的设计原理有助于在开发中做出正确的选择。
摘要由CSDN通过智能技术生成

在 React 的面试中会对 Hooks API 进行一个区分度考察，重点往往会落在 useEffect 与 useLayoutEffect 上。很有意思，光从名字来看，它们就很相像，所以被点名的概率就很高。这一讲我们来重点讲解下这部分内容。

审题

在第 04 讲“类组件与函数组件有什么区别呢？”中讲过该类型的题目，其中提到描述区别，就是求同存异的过程。 那我们可以直接用同样的思路来思考下这道题。

先挖掘 useEffect 与 useLayoutEffect 的共性，它们被用于解决什么问题，其次发掘独特的个性、各自适用的场景、设计原理以及未来趋势等。

承题

根据以上的分析，该讲所讲解题目的答题思路就有了。
先是论述共同点：

● 使用方式，也就是列举使用方式上有什么相似处，共同用于解决什么问题；
● 运用效果，使用后的执行效果上有什么相似处。
其次是不同点：

● 使用场景，两者在使用场景的区分点在哪里，为什么可以或者不可以混用；
● 独有能力，什么能力是其独有的，而另外一方没有的；
● 设计原理，即从内部设计挖掘本质的原因；
● 未来趋势，两者在未来的发展趋势上有什么区别&#x

了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
juejin小册|react|04类组件与函数组件有什么区别呢？
VAN
01-24 96
经过本讲的学习，你可以掌握类组件与函数组件的区别，对于组件的方方面面都有了大概的认识。那么组件是通过什么模式来设计的呢？我将会在下一讲与你详细探讨。精选评论**辉：我太菜了吧，还是没听懂改变小白小黄的例子，按这样岂不是说类组件更好，实时更新**举：类组件未来会用的更少对吧？hook 理论上可以让整个应用都使用函数式组件。讲师回复：是的，React 团队更倾向于推广 Hooks 来取代现有的模式，但 Hooks 这种模式能走多远还得看社区的使用与反馈情况。
React的useEffect与useLayoutEffect执行机制剖析
福禄网络研发团队的博客
08-10 960
引言 useEffect和useLayoutEffect是React官方推出的两个hooks，都是用来执行副作用的钩子函数，名字类似，功能相近，唯一不同的就是执行的时机有差异，今天这篇文章主要是从这两个钩子函数的执行时机入手，来剖析一下React的运行原理和浏览器的渲染流程。 官方解释 useLayoutEffect其函数签名与 useEffect 相同，但它会在所有的 DOM 变...
前端面试宝典React篇17 useEffect 与 useLayoutEffect 区别在哪里？
fegus的博客
09-12 461
本题仍然是一个讲区别的点，所以在整体思路上找相同与不同就可以。这里还有一个很有意思的地方，React 的函数命名追求“望文生义”的效果，这里不是贬义，它在设计上就是希望你从名字猜出真实的作用。比如 componentDidMount、componentDidUpdate 等等虽然名字冗长，但容易理解。从 LayoutEffect 这样一个命名就能看出，它想解决的也就是页面布局的问题。那么在实际的开发中，还有哪些你觉得不太容易理解的 Hooks？或者容易出错的 Hooks？
最新React的useEffect与useLayoutEffect执行机制剖析
gg7894125的博客
08-10 1336
引言 useEffect和useLayoutEffect是React官方推出的两个hooks，都是用来执行副作用的钩子函数，名字类似，功能相近，唯一不同的就是执行的时机有差异，今天这篇文章主要是从这两个钩子函数的执行时机入手，来剖析一下React的运行原理和浏览器的渲染流程。 官方解释 useLayoutEffect其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前， useLayoutEffe
react 使用 useEffect 及踩坑
量子前端的博客
02-03 3766
useEffect 介绍 useEffect时reactHook中最重要，最常用的hook之一。 useEffect相当于react中的什么生命周期呢？ 这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？），开个玩笑这个问题并不难回答，下面是react官方的原话： 如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 co
深度理解并使用react的useEffect()
Sunday97的博客
04-06 1230
深度理解并使用react的useEffect() useEffect()是React 16.8 的新增特性，它的出现是为了弥补只能在react中的类组件中使用的的生命周期函数：componentDidMount、componentDidUpdate、componentWillUnmount（和vue中的mounted、destoryed生命周期函数有异曲同工之妙，其实都是相通的）。 下面这段代码是直接从react文档中拷贝过来的，写的是在类组件中当我们想在文档更新时和在组件消失时执行一些逻辑时，是有相关生命
juejin小册|react|05 如何设计 React 组件？
VAN
01-24 114
在本讲中主要对 React 组件的设计模式进行了梳理与回顾，并探讨了设计模式在工程实践中的作用。在面试中面试官不仅希望听到设计模式有哪些，社区的推荐方式有哪些，更希望听到模式具体用在哪儿。如果你知道具体的场景，就会显得更有经验。设计模式并非有确定的标准答案，社区流行的分类方式也并非万能。如果你有自己的见解，在面试中与面试官进行探讨，也是非常值得鼓励的。下一讲我将会介绍 React 中的一个关于 setState 的经典面试题：“setState 是同步更新还是异步更新”。
juejin小册|react|14 如何避免重复渲染？
VAN
01-25 42
本讲中并没有出现实际的案例，但如果你在项目中有重复渲染案例，不妨根据第 13 讲“如何分析和调优性能瓶颈？”中的流程，自己再总结一份答案，看看是否会有新的收获。在介绍完 React 的性能相关问题后，下一讲我会为你介绍如何提升 React 代码的可维护性。
juejin小册|react|01 你真的了解 React 吗？
VAN
01-24 35
本讲主要讲解了“如何解释 React 是什么”这样一个看似简单却又很难解释的问题。“如何解释 React 是什么？”反映了面试者对 React 的认知水平，常用来快速划分面试者层次。通过这一讲你可以掌握 React 的核心设计思考，了解与其他框架的区别，更重要的是使用非线性的结构化思考模式来回答考官的这一类问题，这一点比答案本身更重要。在本讲中提到了“声明式”这样一个概念，那 React 在组件中是如何展现“声明式”的呢？接下来的 02 讲我们会讲这个问题。《大前端高薪训练营》
React 16.8版本新增方法-----useEffect和useState
兴尽晚回舟
06-25 1万+
import React,{ useState,useEffect } from 'react'; function CounterFun(){ const [ count,setCount] = useState(1); useEffect(()=>{console.log("每次都会执行") }) }； useEffect(()...
react hooks 之 useEffect的 使用
业余前端的职业经历
08-17 1349
这个东西类似于 之前 类的那种写法中的 声明周期函数 useEffect 是 相当于 DidMount 和 DidUpdate 两个周期函数 // 引入 import React,{useState,useEffect} from 'react'; useEffect(() => { console.log('111111111111'); }) 进入页面之后 就会打印 1111111 不过它 还 可以返回一个 函数 用来表示 是 组件 销毁的 声明周期函数 useEffe
react useEffect详解
热门推荐
weixin_45760365的博客
04-24 2万+
useEffect详解 useEffect使用时有以下4种情况 1、不传递 useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。 useEffect(()=>{undefined console.log(props.number) setNumber(props.number) }) //所有更新都执行 2、传递空数组 useEffect(()=>
React,Hooks中useLayoutEffect的使用
weixin_45389051的博客
07-30 3011
useLayoutEffect看起来和useEffect非常的相似,事实上他们也只有一点区别而已，就是 1.useEffect会在渲染的内容更新到DOM上后执行,不会阻塞DOM的更新 2.useLayoutEffect会在渲染的内容更新到DOM上之前进行,会阻塞DOM的更新 下面通过一个案例来演示他们之间具体的区别 import React, { useState, useEffect } from 'react' export default function UseLayoutEffect() {
前端八股文（3）53-84
VAN
09-12 1522
前端八股文
javascript常见100问|前端基础知识|offsetHeight-scrollHeight-clientHeight-区别，HTMLCollection-NodeList-区别，vue-com
最新发布
VAN
04-01 1317
适用于兄弟组件，或者“距离”较远的组件。常用 API● 绑定事件 event.on(key, fn) 或 event.once(key, fn)● 触发事件 event.emit(key, data)● 解绑事件 event.off(key, fn)Vue 版本的区别● Vue 2.x 可以使用 Vue 实例作为自定义事件● Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter。
前端八股文-Nodejs介绍，组成，架构和依赖，特点，运行环境安装，包和NPM,NPM包的版本管理，V8 引擎 和 libuv 库，BFF 中间层，服务端渲染，
VAN
11-05 1169
前端学习
JavaScript教程|导出导入，import*,export default,
VAN
01-07 991
这是我们在本节和前面章节中介绍的所有 export 类型：你可以阅读并回忆它们的含义来进行自查：在声明一个 class/function/… 之前：独立的导出：重新导出：export * from “module”（不会重新导出默认的导出）。export {default [as y]} from “module”（重新导出默认的导出）。
从零开始学习React框架的学习路径、学习资料和资料链接
06-03
好的，下面是从零开始学习React框架的学习路径、学习资料和资料链接： 1. HTML、CSS和JavaScript基础知识 在学习React之前，需要先掌握HTML、CSS和JavaScript的基础知识，包括HTML标签、CSS样式、JavaScript语法、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习记录wanxiaowan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值