useEffect 介紹

如果你熟悉 React class 的生命周期函數(shù)，你可以把 useEffect Hook 看做

componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函數(shù)的組合。

• componentDidMount 組件掛載
• componentDidUpdate 組件更新
• componentWillUnmount 組件將要摧毀

使用方法

情況一：

useEffect需要傳遞兩個參數(shù)，第一個參數(shù)是邏輯處理函數(shù)，第二個參數(shù)是一個數(shù)組

代碼如下：

useEffect(() => {
/** 執(zhí)行邏輯 */
},[])

情況二：

• 第二個參數(shù)存放變量，當(dāng)數(shù)組存放變量發(fā)生改變時，第一個參數(shù)，邏輯處理函數(shù)將會被執(zhí)行
• 第二個參數(shù)可以不傳，不會報錯，但瀏覽器會無限循環(huán)執(zhí)行邏輯處理函數(shù)。

代碼如下：

useEffect(() => {
/** 執(zhí)行邏輯 */
})

情況三：

第二個參數(shù)如果只傳一個空數(shù)組，邏輯處理函數(shù)里面的邏輯只會在組件掛載時執(zhí)行一次 ，等價于 componentDidMount

代碼如下：

useEffect(() => {
/** 執(zhí)行邏輯 */
},[])

情況四：

• 第二個參數(shù)如果不為空數(shù)組,依賴指定參數(shù)觸發(fā)使用
• 邏輯處理函數(shù)會在組件掛載時執(zhí)行一次和(a或者b變量在棧中的值發(fā)生改變時執(zhí)行一次) 這是不是相當(dāng)于componentDidMount 和componentDidUpdate 的結(jié)合

const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 執(zhí)行邏輯 */
},[a,b])

情況五：

• useEffect第一個參數(shù)可以返回一個回調(diào)函數(shù)，這個回調(diào)函數(shù)將會在組件被摧毀之前和再一次觸發(fā)更新時，將之前的副作用清除掉。這就相當(dāng)于componentWillUnmount。
• useEffect去除副作用。我們可能會在組件即將被掛載的時候創(chuàng)建一些不斷循環(huán)的訂閱（計時器，或者遞歸循環(huán)）。在組件被摧毀之前，或者依賴數(shù)組的元素更新后，應(yīng)該將這些訂閱也給摧毀掉。

比如以下的情況（沒有去除計時器，增大不必要的開銷和代碼風(fēng)險）

const [time, setTime] = useState(0)
useEffect(() => {
	const InterVal = setInterval(() => {
		setTime(time + 1)
	},1000)
},[])

處理在組件被摧毀前去除計時器

const [time, setTime] = useState(0)
useEffect(() => {
	const InterVal = setInterval(() => {
		setTime(time + 1)
	},1000)
	return () => {
   		clearInterval(InterVal )
   	}
},[])

特殊情況處理

useEffect監(jiān)測不到依賴數(shù)組元素的變化。

只有一種可能，依賴數(shù)組元素的地址的值根本就沒變，

原因：因為changeA沒有真正的改變a在棧中的值（地址的值），只是改變了a在堆中的值。

useEffect監(jiān)測不到堆中值得變化，所有引用類型數(shù)據(jù)都應(yīng)該注意這一點。

代碼示例:

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
	setA((old) => {
	old.b = 'yx'
	return old
	})
}
useEffect(() => {
/** 當(dāng)組件掛載時執(zhí)行一次changeA */
changeA ()
},[])
/**當(dāng)changeA執(zhí)行卻沒有打印 a*/
useEffect(() => {
/** 執(zhí)行邏輯 */
console.log(a)
},[a])

解決的辦法

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
	setA((old) => {
	const newA = {...old}
	newA .b = 'yx'
	return newA 
	})
}
useEffect(() => {
/** 當(dāng)組件掛載時執(zhí)行一次changeA */
changeA ()
},[])
/**當(dāng)changeA執(zhí)行打印  {b:'yx',c:'18'}  */
useEffect(() => {
/** 執(zhí)行邏輯 */
console.log(a)
},[a])

到此這篇關(guān)于React useEffect的理解與使用的文章就介紹到這了,更多相關(guān)React useEffect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論