日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React?useEffect的理解與使用_React

作者：咸蛋超人l ? 更新時間： 2023-01-27 編程語言

useEffect 介紹

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

componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函數的組合。

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

使用方法

情況一：

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

代碼如下：

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

情況二：

  • 第二個參數存放變量，當數組存放變量發生改變時，第一個參數，邏輯處理函數將會被執行
  • 第二個參數可以不傳，不會報錯，但瀏覽器會無限循環執行邏輯處理函數。

代碼如下：

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

情況三：

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

代碼如下：

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

情況四：

  • 第二個參數如果不為空數組,依賴指定參數觸發使用
  • 邏輯處理函數會在組件掛載時執行一次和(a或者b變量在棧中的值發生改變時執行一次) 這是不是相當于componentDidMount 和componentDidUpdate 的結合
const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 執行邏輯 */
},[a,b])

情況五：

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

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

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監測不到依賴數組元素的變化。

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

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

useEffect監測不到堆中值得變化，所有引用類型數據都應該注意這一點。

代碼示例:

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
	setA((old) => {
	old.b = 'yx'
	return old
	})
}
useEffect(() => {
/** 當組件掛載時執行一次changeA */
changeA ()
},[])
/**當changeA執行卻沒有打印 a*/
useEffect(() => {
/** 執行邏輯 */
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(() => {
/** 當組件掛載時執行一次changeA */
changeA ()
},[])
/**當changeA執行打印  {b:'yx',c:'18'}  */
useEffect(() => {
/** 執行邏輯 */
console.log(a)
},[a])

原文鏈接：https://blog.csdn.net/weixin_50636536/article/details/128379079

欄目分類
最近更新