資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React.js 函式元件中使用 useEffect()
React hook useEffect 幫助在 React 的函式元件中新增 componentDidUpdate 和 componentDidMount 組合的生命週期。
到目前為止，我們知道我們只能在有狀態元件中新增生命週期方法。
要使用它，我們需要從 react 中匯入它：
import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
});
}如果我們執行它，我們將在每次渲染週期中看到控制檯日誌和警報。在這裡，我們也可以在 useEffect 內部呼叫 http 請求。現在這類似於有狀態元件的 componentDidUpdate 生命週期。
我們可以在單個元件中新增多個 useEffect 函式。
如何使其像 componentDidMount 一樣工作
將空陣列作為第二個引數傳遞給 useEffect 函式呼叫使其像 componentDidMount 一樣工作。
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
}, [] );
}我們可以將第二個引數傳遞給 useEffect，如果第二個引數有任何更改，則 React 將執行此 useEffect 函式呼叫。
下面顯示的第二個引數是一個數組，這意味著我們可以在該陣列中新增多個元素。
import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
}, [props.player]);
}如何在函式元件中執行清理工作
在 useEffect 內部，我們可以在函式呼叫的末尾新增一個 return 語句，該語句返回一個函式。此 return 函式執行清理工作。清理工作的執行頻率也取決於傳遞給 useEffect 函式的第二個引數。
import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
return ( ()=>{
console.log(‘cleanup on change of player props’);
});
}, [props.player]);
}我們知道**componentWillUnmount**在元件從實際 DOM 中移除時執行。類似地，如果我們使用帶有空第二個引數的 useEffect 並新增一個 return 函式呼叫，它將作為**componentWillUnmount**工作。
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
return ( ()=>{
console.log(‘cleanup similar to componentWillUnmount’);
});
}, []);
}透過以上程式碼示例，我們可以確定我們將三個生命週期組合在一個函式 useEffect 中。這些生命週期是 componentDidUpdate、componentDidMount、componentWillUnmount。
在 useEffect 中新增 return 語句是可選的，這意味著清理工作是可選的，並取決於用例。
如果我們使用多個 useEffect，則它們將按照宣告順序執行。
給出正確的第二個引數，我們可以最佳化 useEffect 的效能。
只有在指定的第二個引數更改時，useEffect 才會觸發。
useEffe ct 中的程式碼執行是非同步的。還有一個類似於 useEffect 的鉤子，但它以同步方式工作。它稱為 useLayoutEffect。
由於 useLayoutEffect 的執行是同步的，因此它可能會在呼叫完成之前阻塞視覺更新一段時間。因此，它應該用於非常具體的用例，並且在常見用例中首選標準 useEffect。
還有一個鉤子可用於除錯和與第三方庫（如 Redux）一起使用。它稱為 useDebugValue 以顯示自定義鉤子的標籤。
3K+ 次檢視
