React useEffect() Hook：用法、使用方式和使用時間

useEffect() Hook 介紹

useEffect hook一個關鍵組件。 它處理數據獲取、設置事件偵聽器或修改 DOM 等任務，並允許用戶使用功能組件執行副作用。 它還控制組件生命週期。

useeffect掛鉤利用兩個參數，一個函數和一個可選的依賴項數組。 作為第一個參數傳遞的函數在組件的初始渲染後執行，然後在每次更新後再次執行。您可以使用依賴數組指示效果所依賴的變量。 如果依賴數組的任何變量發生變化，將執行新的效果運行。

本質上，useEffect 鉤子的創建是為了解決 ES6 類組件生命週期中面臨的挑戰。然而，它現在已經成為 React 的核心概念之一。

簡要介紹了什麼是 react 中的 useEffect ，現在讓我們看一下它的語法。

useEffect() Hook 的基本語法

useEffect 支持兩個參數； 第二個參數是可選的。 語法如下：

useEffect(<函數>, <依賴>)

該函數包括副作用邏輯。 它會在 DOM 更新後直接觸發回調的執行。

該依賴項包含您的副作用的可選依賴項數組，即狀態和道具值。 請注意，僅當依賴項在渲染過程中發生更改時，use effect 掛鉤才會運行回調。

該語法服務於 useEffect() 的唯一目的。 它允許您將副作用邏輯放在回調函數中，然後使用 dependencies 參數來控制何時需要副作用運行。

在實現 useEffect() Hook 時可以考慮如下語法：

// 導入使用效果

從“反應”中導入{useEffect}；

功能我的組件（）{

// 在返回的 JSX 之上調用它

// 傳遞兩個參數給它，即一個數組和一個函數

使用效果（（）=> {

// 效果函數

返回（）=> {

// 清理函數

};

}, [/* 依賴數組 */]);

// 組件渲染邏輯

}

}

查看我們的免費技術課程，在競爭中脫穎而出。

使用 useEffect() Hook 掛載和卸載組件

安裝

React 組件生命週期的初始階段涉及創建組件並將其插入到 DOM 中。 react useEffect的這個生命週期階段包括 componentDidMount 生命週期方法，它在組件掛載時執行。

下面是使用 useEffect() 掛鉤安裝組件的示例。

componentDidMount() {

console.log("組件掛載成功");

this.setState({

已加載：真

})

}

在上面的示例中，componentDidMount 允許您使用 setState。 因此，您可以輕鬆地在生命週期方法中設置和更改狀態。 相應的方法使用 API 調用、調用遠程端點並獲取數據。

卸載

這個React useEffect生命週期方法處理 DOM 中的清理。它就像一個從 DOM 中刪除組件的useEffect 清理函數。 在 React 中稱為卸載。 卸載只使用一種生命週期方法，即componentWillUnmount。 當你想從 DOM 中刪除一個組件時調用它。

componentWillUnmount() {

console.log("組件卸載成功");

}

使用 use effect() Hook 處理狀態變化

useEffect在每次渲染後執行。它還用於運行某些代碼以確認狀態更改。 您可以通過在 useEffect() Hook 中傳遞第二個參數來控制效果的執行時間。 第二個參數作為一個依賴數組，即如果相應的變量發生變化，效果必須重新運行。 請注意，state 是其中一種變量類型。

以下部分舉例說明使用效果鉤子如何處理狀態變化。

例如，您可能希望根據“天”值運行副作用。 假設您有一個副作用，即根據當天的值顯示問候消息。 日期值保存在狀態變量中。

每當您選擇一天時，狀態都會更新。 狀態值的更改使您可以更新問候消息。 您應該將狀態變量作為依賴項數組的子集傳遞給 useEffect 掛鉤。

使用效果（（）=>

{

// 副作用

}， [狀態]）;

在上面的useEffect react native示例中，如果狀態變量的值更新，副作用就會運行。

探索我們的熱門軟件工程課程

對 API 和網絡請求使用 useEffect() 掛鉤

您可以將“useEffect()”掛鉤與 API 和網絡請求結合使用，以從服務器獲取數據並處理錯誤。 以下是如何將“useEffect()”與 API 結合使用並處理網絡錯誤的示例：

從“反應”中導入反應，{useState，useEffect}；

功能我的組件（）{

const [數據, setData] = useState(null);

const [error, setError] = useState(null);

使用效果（（）=> {

異步函數 fetchData() {

嘗試 {

const response = await fetch('https://api.example.com/data');

如果（！response.ok）{

throw new Error('網絡響應不正常');

}

const json = await response.json();

設置數據（json）；

} 趕上（錯誤）{

設置錯誤（錯誤）；

}

}

獲取數據（）；

}, []);

如果（錯誤）{

返回<div>錯誤：{error.message}</div>；

}

如果（！數據）{

返回 <div>正在加載...</div>;

}

返回 （

<分區>

<p>{數據.消息}</p>

</div>

);

}

您可以修改此示例以包含處理網絡請求和 API 響應所需的任何其他功能。

高級 useEffect() 鉤子技術

一種高級的useEffect React Native技術是記憶。這是一種優化技術，其中緩存函數調用的輸出。 隨後，當再次輸入相同的輸入時，useEffect 返回函數返回它。

另一個著名的 useEffect() Hook 技術是 useMemo Hook。 它可以讓你計算一個值並記住它。 它的語法是：

從 'react' 導入 { useMemo }

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() 鉤子依賴

useEffect() Hook 依賴項包含您的副作用的依賴項列表，同時還包含狀態或道具值。 dependencies 參數允許您捕獲一些組件生命週期事件，例如組件被安裝或特定狀態/屬性值被更新。

dependencies 參數使您可以控制調用副作用的時間，而不管組件的渲染週期如何。

使用 useEffect() Hook 進行條件渲染

useEffect Hook 允許您將條件放在鉤子中。 這是一個例子。

使用效果（（）=> {

如果（應該執行）{

//（條件列表）

}

}, [應該執行])

您需要在 shouldExecute 函數下提及要執行的強制條件。

使用 effect() Hook vs ComponentDidMount() 和 ComponentDidUpdate()

useEffect() 鉤子 vs componentDidUpdate()：

useEffect() 鉤子 vs componentDidMount()：

useEffect() Hook 的常見錯誤和最佳實踐。

常見錯誤

1.沒有定義依賴

只要組件被渲染，useEffect 就會運行。 因此，您必須定義必須觸發重新渲染的值。 否則，您的 useEffect 函數可能會產生性能問題。

2.執行useEffect hook後沒有清理

useEffect 可能會返回一個清除函數，該函數在卸載組件時執行。 useEffect 後不清理會造成內存洩漏和其他問題。 所以，使用useeffect清理功能很重要。

3. 在useEffect 函數中無依賴地使用setState

如果您更新 useEffect 中的狀態，它會觸發另一個渲染。 這可能會導致無限循環。 為防止這種情況，您必須始終將要更新的狀態變量定義為 useEffect 掛鉤中的依賴項。

探索我們的軟件開發免費課程

最佳實踐：

• 如果你想使用 useEffect 鉤子，請確保每個組件只使用一個。 在多個 useEffect 掛鉤的情況下，所有這些掛鉤都會在組件呈現時運行。 因此，它會產生性能問題和意外行為。
• 確保不要在條件、循環或嵌套函數中使用 useEffect 掛鉤。 如果你在 for 循環中使用 State，那麼 React 會在每次循環運行時創建一個新的狀態變量。 因此，它會導致意想不到的行為。
• 確保不要過度使用 useEffect 掛鉤。 它們會使您的代碼難以閱讀，如果過度使用可能會影響性能。
• 您只能從 React 函數中調用 useEffect 掛鉤。 如果您從類組件調用它，您將看到一個錯誤。

結論

如果您想在不編寫任何額外代碼的情況下輕鬆訪問組件的 props 和狀態，最好在 React 中使用 useEffect 。它顯著簡化了組件中的副作用，因為它使得在狀態或 prop 更改時更容易執行副作用。 您可以考慮上面討論的方面和最佳實踐，以確保您的 React 組件以最佳方式執行。

學習高要求的軟件開發技能在當今時代至關重要。 您可以通過攻讀利物浦約翰摩爾斯大學計算機科學專業的upGrad 理學碩士學位來掌握這些尖端技能。 該課程通過傳授 Java、Python 等技能和相關領域的專業知識，使您成為專業的軟件開發人員。 徹底學習本課程涵蓋的各個方面可以幫助您探索 javascript 開發人員、軟件工程師和後端工程師等工作機會。

除了掌握軟件開發技能外，upGrad 還通過IIITB 的全棧開發執行 PG 課程和全棧軟件開發訓練營等課程，幫助您提升全棧開發人員的職業生涯。 這些課程提供沉浸式學習平台，讓候選人獲得高要求的全棧開發技能，有效地為成功的職業鋪平道路！