useEffect和useLayoutEffect有什么区别?(React)

已于 2022-10-28 22:21:25 修改
阅读量233 收藏
点赞数
文章标签： 前端 javascript react.js
于 2022-10-28 18:35:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VVVVV16/article/details/127576909
版权

区别就是 useLayoutEffect 的执行和 componentdidMount 类似

都是执行完了   只是在react的dom树上执行   而并没有进入  渲染阶段

所以  这个uselayouteffect有可能阻塞渲染的执行

 

而useeffect   是在渲染完以后执行

并不会阻塞渲染

 

Useeffect  操作dom    因为dom已经渲染完了

我们再次 操做dom  会导致 dom的回流  重新渲染

造成页面的抖动

这时候   用uselayouteffect  会更好

 

湖边看客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Hook使用之useEffect和useLayoutEffect
啦啦啦啦的成长之路
02-24 3014
通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。
juejin小册|react|17 useEffect 与 useLayoutEffect 区别在哪里？
VAN
01-26 136
本题仍然是一个讲区别的点，所以在整体思路上找相同与不同就可以。这里还有一个很有意思的地方，React 的函数命名追求“望文生义”的效果，这里不是贬义，它在设计上就是希望你从名字猜出真实的作用。比如 componentDidMount、componentDidUpdate 等等虽然名字冗长，但容易理解。从 LayoutEffect 这样一个命名就能看出，它想解决的也就是页面布局的问题。那么在实际的开发中，还有哪些你觉得不太容易理解的 Hooks？或者容易出错的 Hooks？
React16 useEffect和useLayoutEffect的区别
yingzizizizizizzz的专栏
08-03 823
目录 useEffect是什么？有什么作用？ useLayoutEffect是什么？有什么作用？ 两者区别是什么？ useEffect的使用场景 useLayoutEffect的使用场景 useEffect是什么？有什么作用？ 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用 use
useEffect 与 useLayoutEffect 有什么区别
m0_56568741的博客
09-22 1452
简单来说就是调用时机不同，useLayoutEffect和原来componentDidMount & componentDidupdate一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。而useEffect是会在整个页面渲染完才会调用的代码。我们通常这样使用 useLayoutEffect ，如果你想在副作用钩子函数中 写一些 dom 结构 修改 ，这样在还没渲染前就可以改变dom的内容 这些修改会和react 做出的改变 一起被渲染到屏蔽上，这样就避免了重排重绘的改变。
useEffect和useLayoutEffect的区别
热门推荐
qq_38164763的博客
02-02 1万+
react hook面世已经有一段时间了，相信很多人都已经在代码中用上了hooks。而对于 useEffect 和 useLayoutEffect，我们使用的最多的应该就是useEffect。那他们两个到底有什么不一样的地方？ 使用方式 这两个函数的使用方式其实非常简单，他们都接受一个函数一个数组，只有在数组里面的值改变的情况下才会再次执行 effect。所以对于使用方式我就不过多介绍了，不清楚的可以先参考官网 。 差异 useEffect 是异步执行的，而useLayoutEffect是同步执行的。 u
useEffect与useLayoutEffect
weixin_34240657的博客
12-24 648
React Hook让无狀态组件拥有了许多只有有狀态组件的能力，如自更新能力（setState，使用useState），访问ref（使用useRef或useImperativeMethods），访问context(使用useContext)，使用更高级的setState设置（useReducer），及进行类似生命周期的阶段性方法（useE...
React的useLayoutEffect和useEffect执行时机有什么不同
beifeng11996的博客
12-07 447
我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识useEffect(create, deps):useLayoutEffect(create, deps):注意加粗的字段，React 官方的文档其实把两个 hook 的执行时机说的很清楚，下面我们深入到 react 的执行流程中来理解下react 在 diff 后，会进入到 commit 阶段，准备把虚拟 DOM 发生的变化映射到真实 DOM 上在 commit 阶段的前期，会调用一些生命周期方法，对于类组件来说，需要触发组件的 g
useEffect和useLayoutEffect有什么区别？
03-24
useEffect和useLayoutEffect都是React Hooks中的副作用钩子函数，它们的主要区别在于执行的时机不同。useEffect是在组件渲染完成后异步执行的，而useLayoutEffect是在组件渲染完成后同步执行的。因此，如果需要在...
什么是React中的useEffect和useLayoutEffect？
最新发布
05-13
在React中，useEffect和useLayoutEffect都是用于处理组件副作用的Hook。它们都可以在组件渲染后执行一些操作，比如获取数据、修改DOM等。它们的主要区别在于执行时机和阻塞UI渲染的能力。具体来说，useEffect会在...
useEffect和useLayoutEffect
weixin_43098069的博客
04-17 1581
今天写代码的时候，遇到了一个问题，该问题总结起来可以就是，一个函数组件中，有useLayoutEffect，有useEffect，useEffect中有卸载函数return，那么，在组件第一次加载的时候，useLayoutEffect、useEffect、useEffect.return的执行顺序是什么？组件更新的时候，执行顺序又是什么？ 要弄清楚这个问题，需要去查阅官方文档，我们看看官方文档怎么说。 useLayoutEffect： 1.它会在所有的 DOM 变更之...
useEffect 与 useLayoutEffect
吴冬雪的博客
08-22 1102
优先使用 useEffect，因为它是异步执行的，不会阻塞渲染。会影响到渲染的操作尽量放到 useLayoutEffect中去，避免出现闪烁问题。useLayoutEffect在服务端渲染的时候使用会有一个 warning，因为它可能导致首屏实际内容和服务端渲染出来的内容不一致。useEffect和useLayoutEffect的区别_溪宁的博客-CSDN博客_uselayouteffect。
【React hooks】useEffect和useLayoutEffect
08-26 296
useEffect【异步】 基本上90%的情况下,都应该用这个,这个是在render结束后,你的callback函数执行,但是不会block browser painting,算是某种异步的方式吧,但是class的componentDidMount 和componentDidUpdate是同步的,在render结束后就运行,useEffect在大部分场景下都比class的方式性能更好. ...
hooks-useEffect及useLayoutEffect
luo_qianyu的博客
08-04 313
hooks-useEffect及useLayoutEffect demo，本案例贴的代码是有关研究的核心代码。会删除其他的与研究无关的代码。 function FunctionComponent(props) { // const [state, dispatch] = useState(1); const [state2, dispatch2] = useState(1); useEffect(() => { console.log('qy:1-----',1);
好奇：useEffect和useLayoutEffect的区别
rock_23的博客
04-25 1838
useLayoutEffect 和 useEffect 是一样的，只是两个 hook 执行的时机不同。 上面说了 useLayoutEffect 是在 DOM 变更之后同步调用 effect（就是传入到useLayoutEffect中的函数）,所以 useLayoutEffect 会比 useEffect 执行得早一些。 注意： 1、会在react渲染完之前执行 所以会比useEffect钩子执行会晚（此时dom也已经被渲染出来了） 2、会阻塞渲染，除非要操作dom 否则不推荐使用这个钩子 DOM 变更之后
useEffect和useLayoutEffect区别
qq_40942874的博客
12-30 328
useEffect 基本上90%的情况下,都应该用这个，这个是在render结束后，你的callback函数执行，但是不会block browser painting，算是某种异步的方式吧，但是class的componentDidMount 和componentDidUpdate是同步的,在render结束后就运行，useEffect在大部分场景下都比class的方式性能更好。 useLayoutEffect 这个是用在处理DOM的时候，当你的useEffect里面的操作需要处理DOM，并且会改变页面
React hook之 useEffect 和 useLayoutEffect 比较
weixin_42192113的博客
09-30 307
一、官方解读 1.1 useEffect 该Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。 1.2 useLayou
[react] useEffect和useLayoutEffect有什么区别？
歌谣的博客
11-17 283
[react] useEffect和useLayoutEffect有什么区别？ useEffect是异步的，所谓的异步就是利用requestIdleCallback，在浏览器空闲时间执行传入的callback。大部分情况下，用哪一个都是一样的，如果副作用执行比较长，比如大量计算，如果是useLayoutEffect就会造成渲染阻塞 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值