useLayoutEffect 和useEffect區(qū)別

useEffect 和 useLayoutEffect 都是 React 提供的副作用鉤子，用于處理組件中的副作用邏輯，平時使用較多的鉤子函數(shù)。它們之間的主要區(qū)別在于執(zhí)行時機和對頁面渲染的影響。

• 執(zhí)行時機：

  • useEffect 在組件渲染后（DOM 更新之后）執(zhí)行副作用函數(shù)，這意味著它是異步執(zhí)行的，不會阻塞頁面的渲染。
  • useLayoutEffect 在 DOM 更新之后、瀏覽器執(zhí)行繪制之前同步執(zhí)行副作用函數(shù)。因此，它的執(zhí)行時機比 useEffect 更早，可能會阻塞頁面的渲染。

• 對頁面渲染的影響：

  • 由于 useEffect 是異步執(zhí)行的，它不會阻塞頁面的渲染。因此，如果副作用函數(shù)中包含了對 DOM 的操作，可能會出現(xiàn)頁面閃爍或者用戶看到不一致的界面。
  • useLayoutEffect 是同步執(zhí)行的，它會在頁面更新之前執(zhí)行副作用函數(shù)，可以立即更新 DOM。因此，如果副作用函數(shù)中包含了對 DOM 的操作，可以確保用戶看到的是一致的界面，但也可能會導致頁面渲染的性能問題，特別是在大型組件樹中使用時。

一般來說，優(yōu)先使用 useEffect，因為它的異步執(zhí)行不會影響頁面渲染的性能，同時可以避免一些潛在的問題。只有在特定情況下，比如需要立即對 DOM 進行操作并確保用戶看到一致的界面時，才考慮使用 useLayoutEffect。

useEffect 和 useLayoutEffect 在使用場景上略有不同，可以根據(jù)需求來選擇適合的副作用鉤子：

• useEffect 的使用場景：

  • 大多數(shù)情況下，推薦使用 useEffect。它的異步執(zhí)行不會阻塞頁面的渲染，適合于大多數(shù)副作用邏輯的處理。
  • 當副作用不需要立即執(zhí)行，而是在渲染完成后異步執(zhí)行時，應優(yōu)先考慮使用 useEffect。
  • 適用于大部分數(shù)據(jù)獲取、訂閱事件、設置定時器、網(wǎng)絡請求等異步操作，以及不需要立即更新 DOM 的副作用邏輯。

• useLayoutEffect 的使用場景：

  • 當副作用函數(shù)中包含對 DOM 的操作，并且需要立即更新 DOM 以確保用戶看到一致的界面時，可以考慮使用 useLayoutEffect。
  • 適用于需要立即更新 DOM 的副作用邏輯，比如測量 DOM 尺寸、操作 DOM 元素的樣式、對焦等。
  • 當有些副作用依賴于瀏覽器布局和繪制時，或者需要在渲染前同步執(zhí)行副作用邏輯時，可以選擇 useLayoutEffect。

useEffect如何實現(xiàn)異步

useEffect 本身并不直接實現(xiàn)異步操作，它是 React 提供的副作用鉤子，用于處理組件中的副作用邏輯。通常情況下，我們會在 useEffect 的回調(diào)函數(shù)中執(zhí)行異步操作。

以下是在 useEffect 中實現(xiàn)異步操作的一般步驟：

• 在函數(shù)組件中使用 useEffect 鉤子，并在其回調(diào)函數(shù)中執(zhí)行異步操作。
• 在異步操作的回調(diào)函數(shù)中，可以使用 JavaScript 的異步函數(shù)（如 async/await）或者 Promise API（如 fetch、axios 等）來執(zhí)行具體的異步任務。
• 異步任務完成后，可以在回調(diào)函數(shù)中執(zhí)行需要的后續(xù)操作，比如更新組件狀態(tài)、調(diào)用其他函數(shù)等。

比如：

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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 在 useEffect 的回調(diào)函數(shù)中執(zhí)行異步操作
    const fetchData = async () => {
      try {
        // 使用異步函數(shù)或者 Promise API 執(zhí)行異步任務
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();

        // 異步任務完成后，更新組件狀態(tài)
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    // 調(diào)用異步操作函數(shù)
    fetchData();
  }, []); // 注意：傳入一個空數(shù)組作為依賴項，確保只在組件掛載時執(zhí)行一次

  return (
    <div>
      {data ? (
        <div>Data: {data}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

export default MyComponent;

通常情況下把fetchData放在外面，直接的useEffect里面調(diào)用就行。注意以下的用法是錯誤的，這樣寫異步函數(shù)會返回一個promise對象，而useEffect需要的是一個清理函數(shù)或者undefined。如果直接使用 async 函數(shù)，無法準確確定何時返回清理函數(shù)，也無法確定異步函數(shù)何時執(zhí)行完畢。

 useEffect(async() => {
	const res = await XXX
  }, []); 

useEffect 不寫第二個參數(shù)的場景和使用

在 useEffect 中不寫第二個參數(shù)時，意味著副作用函數(shù)會在每次組件渲染后都被調(diào)用，包括組件的初始渲染和每次更新。這種情況下，副作用函數(shù)不會受到任何依賴項的影響，它會在每次組件更新時都執(zhí)行。

以下是在不寫第二個參數(shù)的情況下使用 useEffect 的一些場景和使用方式：

需要在組件的每次渲染后執(zhí)行副作用邏輯： 如果副作用邏輯不依賴于組件的狀態(tài)或?qū)傩?，而是希望在每次組件渲染后都執(zhí)行，可以不傳遞第二個參數(shù)。

useEffect(() => {
  // 每次組件渲染后都會執(zhí)行的副作用邏輯
  console.log('Component rendered');
});

需要執(zhí)行訂閱、定時器等持續(xù)性的副作用操作： 如果副作用需要持續(xù)執(zhí)行，比如訂閱事件、設置定時器等，可以在不傳遞第二個參數(shù)的情況下實現(xiàn)。

useEffect(() => {
  const timerId = setInterval(() => {
    // 每隔一定時間執(zhí)行的副作用邏輯
    console.log('Timer ticked');
  }, 1000);

  // 清除定時器
  return () => {
    clearInterval(timerId);
  };
});

但是在不寫第二個參數(shù)的情況下，副作用函數(shù)會在每次組件更新時都被調(diào)用，這可能會導致性能問題或者不必要的副作用執(zhí)行。因此，盡量在副作用函數(shù)中避免執(zhí)行昂貴的操作，或者在適當?shù)那闆r下通過傳遞依賴項來控制副作用的執(zhí)行時機。

到此這篇關于react中useLayoutEffect 和useEffect區(qū)別的文章就介紹到這了,更多相關react useLayoutEffect  useEffect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！