前言

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

今天，我們就來講講useLayoutEffect如何處理DOM,還有從底層是如何實現的？zHW28資訊網——每日最新資訊28at.com

好了，天不早了，干點正事哇。zHW28資訊網——每日最新資訊28at.com

我們能所學到的知識點

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

1. 前置知識點

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

強制布局

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

強制布局（Forced Synchronous Layout 或 Forced Reflow）是Web性能優化領域的一個術語，它指的是瀏覽器在能夠繼續「處理后續操作之前，必須完成當前的布局計算」。zHW28資訊網——每日最新資訊28at.com

當強制執行布局時，瀏覽器會暫停JS主線程，盡管調用棧不是空的。zHW28資訊網——每日最新資訊28at.com

有很多我們耳熟能詳的操作，都會觸發強制布局。zHW28資訊網——每日最新資訊28at.com

圖片zHW28資訊網——每日最新資訊28at.com

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

想了解更多

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

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

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

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