前言

在React中針對DOM操作的最常見方法是使用refs來訪問DOM節(jié)點，其實還有一種方法，就是使用useLayoutEffect來訪問DOM節(jié)點，根據(jù)實際 DOM 測量（例如元素的大小或位置）來更改元素。19B28資訊網(wǎng)——每日最新資訊28at.com

今天，我們就來講講useLayoutEffect如何處理DOM,還有從底層是如何實現(xiàn)的？19B28資訊網(wǎng)——每日最新資訊28at.com

好了，天不早了，干點正事哇。19B28資訊網(wǎng)——每日最新資訊28at.com

我們能所學(xué)到的知識點

1. 前置知識點
2. useEffect 導(dǎo)致布局閃爍
3. 使用 useLayoutEffect 修復(fù)閃爍問題
4. 瀏覽器如何渲染頁面
5. useEffect vs useLayoutEffect
6. 在 Next.js 和其他 SSR 框架中使用 useLayoutEffect

1. 前置知識點

「前置知識點」，只是做一個概念的介紹，不會做深度解釋。因為，這些概念在下面文章中會有出現(xiàn)，為了讓行文更加的順暢，所以將本該在文內(nèi)的概念解釋放到前面來。「如果大家對這些概念熟悉，可以直接忽略」同時，由于閱讀我文章的群體有很多，所以有些知識點可能「我視之若珍寶，爾視只如草芥，棄之如敝履」。以下知識點，請「酌情使用」。19B28資訊網(wǎng)——每日最新資訊28at.com

強制布局

在EventLoop = TaskQueue + RenderQueue有介紹，然后我們在簡單提一下。19B28資訊網(wǎng)——每日最新資訊28at.com

強制布局（Forced Synchronous Layout 或 Forced Reflow）是Web性能優(yōu)化領(lǐng)域的一個術(shù)語，它指的是瀏覽器在能夠繼續(xù)「處理后續(xù)操作之前，必須完成當(dāng)前的布局計算」。19B28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)強制執(zhí)行布局時，瀏覽器會暫停JS主線程，盡管調(diào)用棧不是空的。19B28資訊網(wǎng)——每日最新資訊28at.com

有很多我們耳熟能詳?shù)牟僮鳎紩|發(fā)強制布局。19B28資訊網(wǎng)——每日最新資訊28at.com

圖片19B28資訊網(wǎng)——每日最新資訊28at.com

其中有我們很熟悉的getBoundingClientRect(),下文中會有涉及。19B28資訊網(wǎng)——每日最新資訊28at.com

想了解更多

本文鏈接：http://www.www897cc.com/showinfo-26-43319-0.htmlUseLayoutEffect的秘密，你知道嗎？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 程序員為保飯碗，開始“防御性編程”

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