1. 概述

useLayoutEffect 是 React 中用于處理副作用的 Hook 之一，它與 useEffect 功能相似，但執(zhí)行時(shí)機(jī)有著顯著差異。useLayoutEffect 會(huì)在所有的 DOM 變更之后同步執(zhí)行，這一特性使其特別適合用于需要基于最新 DOM 結(jié)構(gòu)進(jìn)行操作的場(chǎng)景，例如獲取元素尺寸、操作 DOM 樣式等，能有效避免因異步執(zhí)行導(dǎo)致的視覺閃爍或布局抖動(dòng)問(wèn)題，確保頁(yè)面渲染的穩(wěn)定性和一致性。

2. 基本原理與語(yǔ)法

useLayoutEffect 的原理基于 React 的渲染機(jī)制。在 React 進(jìn)行組件渲染時(shí)，會(huì)先構(gòu)建虛擬 DOM，計(jì)算出需要更新的部分，然后將這些更新應(yīng)用到真實(shí) DOM 上。useLayoutEffect 恰好在真實(shí) DOM 更新完成，但瀏覽器尚未進(jìn)行繪制之前執(zhí)行，這就保證了開發(fā)者可以在這個(gè)階段安全地訪問(wèn)和操作最新的 DOM 結(jié)構(gòu)。

在語(yǔ)法使用上，useLayoutEffect 需要從 react 庫(kù)中導(dǎo)入，它接受一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)中可以編寫副作用邏輯。同時(shí)，useLayoutEffect 也支持第二個(gè)可選參數(shù)，即依賴項(xiàng)數(shù)組，用于控制副作用的重新執(zhí)行時(shí)機(jī)。其語(yǔ)法示例如下：

import React, { useLayoutEffect, useState } from'react';

function App() {
  const [count, setCount] = useState(0);
  useLayoutEffect(() => {
    document.title = `Count is ${count}`;
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在上述代碼中，useLayoutEffect 會(huì)在每次 count 狀態(tài)發(fā)生變化，且 DOM 已更新后，立即更新頁(yè)面的標(biāo)題。依賴項(xiàng)數(shù)組 [count] 確保只有當(dāng) count 改變時(shí)，useLayoutEffect 的回調(diào)函數(shù)才會(huì)重新執(zhí)行。

3. 應(yīng)用場(chǎng)景

下面是一些實(shí)際的應(yīng)用場(chǎng)景：

3.1 獲取元素尺寸和位置

在開發(fā)圖表、拖拽交互等功能時(shí)，常常需要獲取元素的尺寸和位置信息。例如，在一個(gè)動(dòng)態(tài)生成的柱狀圖組件中，每個(gè)柱子的高度需要根據(jù)數(shù)據(jù)動(dòng)態(tài)計(jì)算并設(shè)置。通過(guò) useLayoutEffect，可以在組件渲染完成后，立即獲取容器元素的尺寸，再根據(jù)數(shù)據(jù)計(jì)算柱子高度并設(shè)置相應(yīng)的樣式，保證圖表能夠準(zhǔn)確渲染，避免因異步計(jì)算導(dǎo)致的圖表閃爍問(wèn)題。

import React, { useLayoutEffect, useState, useRef } from'react';

function BarChart({ data }) {
  const chartRef = useRef(null);
  const [barHeights, setBarHeights] = useState([]);

  useLayoutEffect(() => {
    if (chartRef.current) {
      const containerWidth = chartRef.current.offsetWidth;
      const newBarHeights = data.map((value) => {
        // 簡(jiǎn)單計(jì)算柱子高度，實(shí)際應(yīng)用中更復(fù)雜
        return (value / Math.max(...data)) * containerWidth;
      });
      setBarHeights(newBarHeights);
    }
  }, [data]);

  return (
    <div ref={chartRef}>
      {data.map((_, index) => (
        <div
          key={index}
          style={{
            width: '20px',
            height: `${barHeights[index]}px`,
            backgroundColor: 'blue',
            marginRight: '5px',
            display: 'inline-block'
          }}
        />
      ))}
    </div>
  );
}

export default BarChart;

3.2 強(qiáng)制同步更新 DOM 樣式

當(dāng)需要根據(jù)狀態(tài)變化立即更新 DOM 樣式，且不希望出現(xiàn)視覺延遲時(shí)，useLayoutEffect 是最佳選擇。比如在實(shí)現(xiàn)一個(gè)主題切換功能時(shí)，用戶點(diǎn)擊切換主題按鈕后，頁(yè)面的整體樣式需要立即改變。利用 useLayoutEffect，可以在狀態(tài)更新后，同步修改 DOM 的樣式類名或直接設(shè)置內(nèi)聯(lián)樣式，確保用戶能即時(shí)看到主題切換效果，不會(huì)出現(xiàn)短暫的樣式錯(cuò)亂。

3.3 處理瀏覽器事件與 DOM 交互

在綁定和處理一些與 DOM 緊密相關(guān)的瀏覽器事件時(shí)，useLayoutEffect 能確保事件綁定在正確的 DOM 結(jié)構(gòu)上。例如，為一個(gè)可滾動(dòng)的列表添加滾動(dòng)事件監(jiān)聽器，需要在列表渲染完成后進(jìn)行綁定。使用 useLayoutEffect 可以在 DOM 更新后立即綁定滾動(dòng)事件，并且在組件卸載時(shí)正確移除事件監(jiān)聽器，避免內(nèi)存泄漏，保證交互功能的穩(wěn)定性。

4. 與其他相關(guān)Hook的對(duì)比

在 React 的 Hook 體系中，useLayoutEffect 與 useEffect 最為相似，但它們的執(zhí)行時(shí)機(jī)決定了不同的應(yīng)用場(chǎng)景。useEffect 會(huì)在瀏覽器完成繪制后異步執(zhí)行，適用于不影響頁(yè)面視覺效果的副作用操作，如數(shù)據(jù)請(qǐng)求、訂閱事件等。例如，從 API 獲取數(shù)據(jù)并更新組件狀態(tài)，這種操作不需要即時(shí)反饋給用戶，使用 useEffect 不會(huì)影響頁(yè)面的流暢度。

而 useLayoutEffect 由于同步執(zhí)行的特性，如果在其回調(diào)函數(shù)中執(zhí)行復(fù)雜計(jì)算或耗時(shí)操作，可能會(huì)阻塞瀏覽器的渲染，導(dǎo)致頁(yè)面卡頓。因此，在選擇使用時(shí)，開發(fā)者需要根據(jù)副作用操作是否與 DOM 渲染緊密相關(guān)，以及是否對(duì)即時(shí)性有要求來(lái)決定使用 useLayoutEffect 還是 useEffect。

此外，useLayoutEffect 與 useState、useReducer 等狀態(tài)管理 Hook 也有所不同。useState 和 useReducer 主要用于管理組件的狀態(tài)，而 useLayoutEffect 專注于處理與狀態(tài)變化相關(guān)的副作用，它們?cè)?React 應(yīng)用開發(fā)中承擔(dān)著不同的角色，相互配合以實(shí)現(xiàn)豐富的功能。

5. 結(jié)合其他Hook使用

useLayoutEffect 可以與其他 Hook 靈活結(jié)合使用，以滿足更復(fù)雜的需求。例如，與 useRef 結(jié)合可以更方便地操作 DOM 元素。在一個(gè)實(shí)現(xiàn)自動(dòng)聚焦的輸入框組件中，通過(guò) useRef 獲取輸入框元素的引用，再利用 useLayoutEffect 在組件渲染完成后立即將焦點(diǎn)設(shè)置到輸入框上，實(shí)現(xiàn)用戶進(jìn)入頁(yè)面即可直接輸入的效果。

import React, { useLayoutEffect, useRef } from'react';

function AutoFocusInput() {
  const inputRef = useRef(null);
  useLayoutEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);
  return <input type="text" ref={inputRef} />;
}

export default AutoFocusInput;

同時(shí)，useLayoutEffect 也能和 useState 配合，在狀態(tài)更新后基于最新 DOM 進(jìn)行操作。比如在一個(gè)可折疊面板組件中，當(dāng)面板展開或收起的狀態(tài)改變時(shí)，useLayoutEffect 可以在 DOM 更新后獲取面板的高度等信息，用于實(shí)現(xiàn)過(guò)渡動(dòng)畫或其他交互效果。

6. 注意事項(xiàng)

• 避免在 useLayoutEffect 中執(zhí)行長(zhǎng)時(shí)間運(yùn)行的任務(wù)或復(fù)雜計(jì)算，因?yàn)樗鼤?huì)阻塞瀏覽器的渲染線程，導(dǎo)致頁(yè)面卡頓，影響用戶體驗(yàn)。如果有復(fù)雜計(jì)算需求，盡量將其放在 useEffect 或其他異步操作中進(jìn)行。
• 合理使用依賴項(xiàng)數(shù)組，確保 useLayoutEffect 的回調(diào)函數(shù)在正確的時(shí)機(jī)重新執(zhí)行。錯(cuò)誤設(shè)置依賴項(xiàng)數(shù)組可能會(huì)導(dǎo)致副作用執(zhí)行次數(shù)過(guò)多或過(guò)少，引發(fā)難以排查的問(wèn)題。
• 由于 useLayoutEffect 會(huì)在 DOM 更新后立即執(zhí)行，頻繁觸發(fā)可能會(huì)帶來(lái)性能問(wèn)題。在設(shè)計(jì)組件邏輯時(shí)，要盡量減少不必要的 useLayoutEffect 調(diào)用，或者通過(guò)優(yōu)化邏輯減少其執(zhí)行頻率。
• 當(dāng) useLayoutEffect 中包含事件監(jiān)聽器等資源時(shí)，一定要在組件卸載時(shí)正確清理，避免內(nèi)存泄漏。通?？梢栽?useLayoutEffect 返回的清理函數(shù)中移除事件監(jiān)聽器或取消訂閱等操作。

以上就是React使用useLayoutEffect解決操作DOM頁(yè)面閃爍問(wèn)題的方法的詳細(xì)內(nèi)容，更多關(guān)于React useLayoutEffect解決DOM頁(yè)面閃爍的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論