useLayoutEffect 和useEffect區(qū)別

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

• 執(zhí)行時(shí)機(jī)：

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

• 對(duì)頁(yè)面渲染的影響：

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

一般來說，優(yōu)先使用 useEffect，因?yàn)樗漠惒綀?zhí)行不會(huì)影響頁(yè)面渲染的性能，同時(shí)可以避免一些潛在的問題。只有在特定情況下，比如需要立即對(duì) DOM 進(jìn)行操作并確保用戶看到一致的界面時(shí)，才考慮使用 useLayoutEffect。

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

• useEffect 的使用場(chǎng)景：

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

• useLayoutEffect 的使用場(chǎng)景：

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

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

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

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

• 在函數(shù)組件中使用 useEffect 鉤子，并在其回調(diào)函數(shù)中執(zhí)行異步操作。
• 在異步操作的回調(diào)函數(shù)中，可以使用 JavaScript 的異步函數(shù)（如 async/await）或者 Promise API（如 fetch、axios 等）來執(zhí)行具體的異步任務(wù)。
• 異步任務(wù)完成后，可以在回調(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í)行異步任務(wù)
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();

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

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

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

export default MyComponent;

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

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

useEffect 不寫第二個(gè)參數(shù)的場(chǎng)景和使用

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

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

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

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

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

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

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

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

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

最新評(píng)論