UseLayoutEffect的秘密，你知道吗？

前言

在React中针对DOM操作的最常见方法是使用refs来访问DOM节点，其实还有一种方法，就是使用useLayoutEffect来访问DOM节点，根据实际 DOM 测量（例如元素的大小或位置）来更改元素。IBM28资讯网——每日最新资讯28at.com

今天，我们就来讲讲useLayoutEffect如何处理DOM,还有从底层是如何实现的？IBM28资讯网——每日最新资讯28at.com

好了，天不早了，干点正事哇。IBM28资讯网——每日最新资讯28at.com

我们能所学到的知识点

1. 前置知识点
2. useEffect 导致布局闪烁
3. 使用 useLayoutEffect 修复闪烁问题
4. 浏览器如何渲染页面
5. useEffect vs useLayoutEffect
6. 在 Next.js 和其他 SSR 框架中使用 useLayoutEffect

1. 前置知识点

「前置知识点」，只是做一个概念的介绍，不会做深度解释。因为，这些概念在下面文章中会有出现，为了让行文更加的顺畅，所以将本该在文内的概念解释放到前面来。「如果大家对这些概念熟悉，可以直接忽略」同时，由于阅读我文章的群体有很多，所以有些知识点可能「我视之若珍宝，尔视只如草芥，弃之如敝履」。以下知识点，请「酌情使用」。IBM28资讯网——每日最新资讯28at.com

强制布局

在EventLoop = TaskQueue + RenderQueue有介绍，然后我们在简单提一下。IBM28资讯网——每日最新资讯28at.com

强制布局（Forced Synchronous Layout 或 Forced Reflow）是Web性能优化领域的一个术语，它指的是浏览器在能够继续「处理后续操作之前，必须完成当前的布局计算」。IBM28资讯网——每日最新资讯28at.com

当强制执行布局时，浏览器会暂停JS主线程，尽管调用栈不是空的。IBM28资讯网——每日最新资讯28at.com

有很多我们耳熟能详的操作，都会触发强制布局。IBM28资讯网——每日最新资讯28at.com

图片IBM28资讯网——每日最新资讯28at.com

其中有我们很熟悉的getBoundingClientRect(),下文中会有涉及。IBM28资讯网——每日最新资讯28at.com

想了解更多

本文链接：http://www.28at.com/showinfo-26-43319-0.htmlUseLayoutEffect的秘密，你知道吗？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 程序员为保饭碗，开始“防御性编程”

下一篇： Python文件操作：JSON、CSV、TSV、Excel和Pickle文件序列化