useEffect

1.useEffect的介紹

• 引用官網(wǎng)的一句話就是：useEffect 就是一個 Effect Hook，給函數(shù)組件增加了操作副作用的能力。（你之前可能已經(jīng)在 React 組件中執(zhí)行過數(shù)據(jù)獲取、訂閱或者手動修改過 DOM。我們統(tǒng)一把這些操作稱為“副作用”，或者簡稱為“作用”。）
• 可以在組件內(nèi)多次調(diào)用
• React 會在每次渲染后調(diào)用副作用函數(shù) —— 包括第一次渲染的時候。
• 副作用函數(shù)還可以通過返回一個函數(shù)來指定如何“清除”副作用。
• React 會在組件卸載的時候執(zhí)行清除操作。
• 它的第二個參數(shù)為數(shù)組：僅在數(shù)組（定義的第二個參數(shù)）里面各項有一項發(fā)生變化的情況才會觸發(fā)當(dāng)前的 userEffect ，否則不觸發(fā)。

2.基本使用

2-1.基本使用

useEffect不傳遞第二個參數(shù)會導(dǎo)致每次渲染都會運行useEffect。然后，當(dāng)它運行時，它獲取數(shù)據(jù)并更新狀態(tài)。然后，一旦狀態(tài)更新，組件將重新呈現(xiàn)，這將再次觸發(fā)useEffect，這就是問題所在。

useEffect(()=>{undefined
	console.log(props.number)
	setNumber(props.number)
}) //所有更新都執(zhí)行

2-2 傳遞空數(shù)組

當(dāng)?shù)诙€參數(shù)為空數(shù)組時，僅在掛載與卸載時觸發(fā)

useEffect(()=>{undefined
	console.log(props)
},[]) //僅在掛載和卸載的時候執(zhí)行

2-3 傳遞一個值

當(dāng)參數(shù)為一個值，類比于Vue中的監(jiān)聽器，當(dāng)該值發(fā)生變化時，才會調(diào)用useEffect函數(shù)

useEffect(()=>{undefined
	console.log(count)
},[count]) //count更新時執(zhí)行

2-4 傳遞多個值

useState返回的setter 不會在每次渲染時重新創(chuàng)建，因此只會運行一次

const Asynchronous : React.FC=({number})=>{undefined
const [number2,setNumber2] = useState(number);
useEffect(()=>{undefined
	console.log(number)
	setNumber2(number)
},[number,setNumber2]) //監(jiān)聽props對象number的更改
//setNumber2是useState返回的setter，所以不會在每次渲染時重新創(chuàng)建它，因此effect只會運行一次
}

2-5 傳遞props的對象 傳遞的useState返回的setter

2-6 return

return中的函數(shù) 會在組件銷毀時被調(diào)用 相當(dāng)于componentWillUnMount

類似Vue中的onDestroy

const timer = setInterval(() => {undefined
setCount(count + 1)
}, 1000)
// useEffect方法的第一個參數(shù)是一個函數(shù)，函數(shù)可以return一個方法，這個方法就是在組件銷毀的時候會被調(diào)用
useEffect(() => {undefined
	return () => {undefined
	clearInterval(timer)
	}
}, [])