1、函數(shù)介紹

useEffect 是 React 中的一個(gè) Hook，用于在函數(shù)組件中處理副作用（如數(shù)據(jù)獲取、訂閱、手動(dòng)更改 DOM 等）。與類組件中的生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）類似，useEffect 讓你在函數(shù)組件中完成相同的操作。( from chatGPT)

        簡(jiǎn)單來(lái)說，useEffect屬于組件的生命周期方法。在組件不同的生命周期，我們可以通過useEffect函數(shù)來(lái)控制執(zhí)行過程。 那么什么是組件的生命周期呢？

2.組件的生命周期

        在 React 中，組件的生命周期分為三個(gè)主要階段：掛載（Mounting）、更新（Updating）和卸載（Unmounting）。掛載和渲染是關(guān)鍵的生命周期階段，理解它們對(duì)于有效地使用 React 至關(guān)重要。

2.1 掛載（Mounting）

載是指組件第一次被插入到 DOM 中的過程。掛載階段包括以下步驟：

• 構(gòu)造函數(shù)（Constructor）：組件的構(gòu)造函數(shù)被調(diào)用。如果你在類組件中定義了構(gòu)造函數(shù)，那么它會(huì)在組件實(shí)例化時(shí)首先被調(diào)用。
• getDerivedStateFromProps（靜態(tài)方法）：在初始化和更新期間調(diào)用，允許組件基于輸入的 props 來(lái)更新狀態(tài)。它是一個(gè)靜態(tài)方法，不能訪問組件實(shí)例。
• render：渲染方法被調(diào)用。它返回要渲染的元素（通常是 JSX）。
• componentDidMount：組件已經(jīng)被掛載到 DOM 中，此時(shí)可以執(zhí)行一些副作用操作，比如數(shù)據(jù)獲取、訂閱事件等。

2.2 渲染和更新

渲染（Rendering）

渲染是指組件根據(jù)其當(dāng)前狀態(tài)和屬性生成要顯示的元素。每次組件的狀態(tài)或?qū)傩园l(fā)生變化時(shí)，渲染過程都會(huì)被觸發(fā)。渲染階段包括：

• render 方法（類組件）：被調(diào)用以生成虛擬 DOM 結(jié)構(gòu)。
• 函數(shù)組件本身：被調(diào)用以生成虛擬 DOM 結(jié)構(gòu)。

在每次狀態(tài)或?qū)傩宰兓瘯r(shí)，組件會(huì)重新渲染。React 將對(duì)比虛擬 DOM（使用 Diff 算法）并更新實(shí)際 DOM 以反映變化。

更新（Updating）

更新是指組件的狀態(tài)或?qū)傩园l(fā)生變化并重新渲染的過程。更新階段包括以下步驟：

• getDerivedStateFromProps（靜態(tài)方法）：同掛載階段一樣，在屬性變化時(shí)調(diào)用。
• shouldComponentUpdate：決定組件是否應(yīng)該重新渲染。返回 true 表示重新渲染，返回 false 表示跳過更新。
• render：渲染方法被調(diào)用以生成新的虛擬 DOM 結(jié)構(gòu)。
• getSnapshotBeforeUpdate：在 DOM 更新之前被調(diào)用，返回的值將作為 componentDidUpdate 的第三個(gè)參數(shù)。
• componentDidUpdate：組件更新并重新渲染到 DOM 之后調(diào)用，可執(zhí)行副作用操作。

2.3 卸載（Unmounting）

卸載是指組件被移出 DOM 的過程。卸載階段只包括一個(gè)方法：

componentWillUnmount：組件即將卸載時(shí)調(diào)用，可以在這里執(zhí)行清理操作，例如取消訂閱、清除定時(shí)器等。

2.4 總結(jié)

• 掛載：組件第一次被插入到 DOM 中時(shí)執(zhí)行。類組件中使用 componentDidMount，函數(shù)組件中使用 useEffect（空依賴數(shù)組）。
• 渲染：每次組件的狀態(tài)或?qū)傩宰兓瘯r(shí)，都會(huì)重新生成虛擬 DOM 并更新實(shí)際 DOM。
• 更新：狀態(tài)或?qū)傩宰兓鸾M件重新渲染。類組件中使用 componentDidUpdate，函數(shù)組件中使用 useEffect（依賴數(shù)組）。
• 卸載：組件被移出 DOM 時(shí)執(zhí)行。類組件中使用 componentWillUnmount，函數(shù)組件中通過 useEffect 的清理函數(shù)處理。

3、函數(shù)的基本用法

        有了對(duì)組件生命周期的認(rèn)識(shí)，那么就可以利用useEffect函數(shù)根據(jù)組件不同的生命周期階段來(lái)執(zhí)行不同的方法。比如：

• 有的方法只希望在執(zhí)行一次，即在組件掛載的時(shí)候執(zhí)行一次就夠了，后面也不需要再次執(zhí)行
• 有的方法希望在組件每次渲染（元素有更新）的時(shí)候都執(zhí)行
• 有的方法希望在某個(gè)依賴的變量發(fā)生變化時(shí)才會(huì)執(zhí)行
• 有的方法希望在組件卸載（頁(yè)面退出的）的時(shí)候執(zhí)行

上面的執(zhí)行過程都都可以通過useEffect方法做到。

3.1 用法示例

import React, { useState, useEffect } from 'react';
function ExampleComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 這里的代碼相當(dāng)于 componentDidMount 和 componentDidUpdate
    document.title = `You clicked ${count} times`;
    // 如果需要清理，可以返回一個(gè)函數(shù)
    return () => {
      // 這里的代碼相當(dāng)于 componentWillUnmount
      console.log('Cleaning up...');
    };
  }, [count]); // 依賴數(shù)組
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
export default ExampleComponent;

3.2 用法說明

副作用的執(zhí)行：

• useEffect 的第一個(gè)參數(shù)是一個(gè)函數(shù)，它在組件渲染后執(zhí)行?？梢栽谶@個(gè)函數(shù)內(nèi)進(jìn)行副作用操作。
• 如果需要清理副作用，可以在這個(gè)函數(shù)中返回一個(gè)函數(shù)，這個(gè)返回的函數(shù)會(huì)在組件卸載或副作用重新執(zhí)行前調(diào)用。

依賴數(shù)組：

• useEffect 的第二個(gè)參數(shù)是一個(gè)依賴數(shù)組（可以依賴多個(gè)變量），表示副作用依賴的變量。當(dāng)依賴數(shù)組中的任何一個(gè)變量發(fā)生變化時(shí)，副作用函數(shù)會(huì)重新執(zhí)行。
• 如果依賴數(shù)組為空（[]），副作用函數(shù)只會(huì)在組件掛載和卸載時(shí)執(zhí)行一次，類似于 componentDidMount 和 componentWillUnmount。
• 如果不傳依賴數(shù)組，副作用函數(shù)會(huì)在每次組件渲染后執(zhí)行，類似于 componentDidUpdate。

3.3 使用規(guī)則

• 在組件頂層調(diào)用：只能在 React 函數(shù)組件或自定義 Hook 的頂層調(diào)用 useEffect，不要在循環(huán)、條件或嵌套函數(shù)中調(diào)用。
• 依賴數(shù)組：確保正確設(shè)置依賴數(shù)組，以避免不必要的副作用執(zhí)行或缺少必要的更新。

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

最新評(píng)論