關于useEffect執(zhí)行兩次的問題及解決
useEffect執(zhí)行兩次問題
在useEffect第二個參數(shù)變化的時候,需要在父組件里面更改這個值的地方加一個判斷,如果有值則設置為空,else更新這個值。useEffect第二個值可以是表達式
父組件里面
//授權樹展示
? ? const handleRoleModalVisible = (RoleModelVisibel: boolean, record?: any) => {
? ? ? ? setRoleModalVisible(RoleModelVisibel);
? ? ? ? // console.log(record)
? ? ? ? if(RoleModelVisibel==undefined){
? ? ? ? ? ? setroleAuth(undefined)
? ? ? ? }else{
? ? ? ? ? ? setroleAuth(record)
? ? ? ? }
? ? };子組件里面
?const {roleAuth, treeData, roleModalVisible, handleRoleModalVisible} = props;
? ? useEffect(() => {
? ? ? ? queryTreeId({role_id: roleAuth.roleId}).then(res => {
? ? ? ? ? ? setCheckedKeys(res.data.content)
? ? ? ? ? ? setSelectedKeys(res.data.content)
? ? ? ? })
? ? }, [roleAuth!==undefined])在最后
?{
? ? ?roleAuth&&<Authority roleAuth={roleAuth} ?treeData={treeData}
? ? ?roleModalVisible={roleModalVisible} handleRoleModalVisible={handleRoleModalVisible}/>
?}react使用useEffect及踩坑
useEffect 介紹
useEffect時reactHook中最重要,最常用的hook之一。
useEffect相當于react中的什么生命周期呢?
這個問題在react官網(wǎng)中有過介紹,在使用的過程中,容易被忽略,在面試的時候卻經常被問及,(面試造航母,上班擰螺絲?),開個玩笑這個問題并不難回答,下面是react官方的原話:
如果你熟悉 React class 的生命周期函數(shù),你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 這三個函數(shù)的組合。
componentDidMount組件掛載componentDidUpdate組件更新componentWillUnmount組件將要摧毀
useEffect需要傳遞兩個參數(shù),第一個參數(shù)是邏輯處理函數(shù),第二個參數(shù)是一個數(shù)組
用法
useEffect(() => {
/** 執(zhí)行邏輯 */
},[])重要理解
一、第二個參數(shù)存放變量,當數(shù)組存放變量發(fā)生改變時,第一個參數(shù),邏輯處理函數(shù)將會被執(zhí)行
二、第二個參數(shù)可以不傳,不會報錯,但瀏覽器會無線循環(huán)執(zhí)行邏輯處理函數(shù)。
useEffect(() => {
/** 執(zhí)行邏輯 */
})
三、第二個參數(shù)如果只傳一個空數(shù)組,邏輯處理函數(shù)里面的邏輯只會在組件掛載時執(zhí)行一次 ,不就是相當于 componentDidMount
useEffect(() => {
/** 執(zhí)行邏輯 */
},[])四、第二個參數(shù)如果不為空數(shù)組,如下
const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 執(zhí)行邏輯 */
},[a,b])邏輯處理函數(shù)會在組件掛載時執(zhí)行一次和(a或者b變量在棧中的值發(fā)生改變時執(zhí)行一次) 這是不是相當于componentDidMount 和 componentDidUpdate 的結合
五、useEffect第一個參數(shù)可以返回一個回調函數(shù),這個回調函數(shù)將會在組件被摧毀之前和再一次觸發(fā)更新時,將之前的副作用清除掉。這就相當于componentWillUnmount。
useEffect去除副作用。我們可能會在組件即將被掛載的時候創(chuàng)建一些不斷循環(huán)的訂閱(計時器,或者遞歸循環(huán))。在組件被摧毀之前,或者依賴數(shù)組的元素更新后,應該將這些訂閱也給摧毀掉。
比如以下的情況(沒有去除計時器,增大不必要的開銷和代碼風險)
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常見跳坑
1、useEffect執(zhí)行函數(shù)被循環(huán)執(zhí)行。
出現(xiàn)這種情況可能有兩種原因。
沒傳第二個參數(shù)
useEffect(() => {
/** 執(zhí)行邏輯 */
})2、你在useEffect執(zhí)行函數(shù)里面改變了useEffect監(jiān)測的變量
const [a, setA] = useState(1);
useEffect(() => {
/** 執(zhí)行邏輯 */
setA(a + 1)
},[a])解決的方法 不要在useEffect第一參數(shù)執(zhí)行函數(shù)中去改變第二參數(shù)依賴元素的地址的值。當依賴元素的地址的值發(fā)生改變,又會執(zhí)行一次執(zhí)行函數(shù),這不是無限循環(huán)么。
3、useEffect監(jiān)測不到依賴數(shù)組元素的變化。
只有一種可能,依賴數(shù)組元素的地址的值根本就沒變,比如:
const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
?? ?setA((old) => {
?? ?old.b = 'yx'
?? ?return old
?? ?})
}
useEffect(() => {
/** 當組件掛載時執(zhí)行一次changeA */
changeA ()
},[])
/**當changeA執(zhí)行卻沒有打印 a*/
useEffect(() => {
/** 執(zhí)行邏輯 */
console.log(a)
},[a])是因為changeA沒有真正的改變a在棧中的值(地址的值),只是改變了a在堆中的值。
useEffect監(jiān)測不到堆中值得變化,所有引用類型數(shù)據(jù)都應該注意這一點。
解決的辦法:
const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
?? ?setA((old) => {
?? ?const newA = {...old}
?? ?newA .b = 'yx'
?? ?return newA?
?? ?})
}
useEffect(() => {
/** 當組件掛載時執(zhí)行一次changeA */
changeA ()
},[])
/**當changeA執(zhí)行打印 ?{b:'yx',c:'18'} ?*/
useEffect(() => {
/** 執(zhí)行邏輯 */
console.log(a)
},[a])以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
react中value與defaultValue的區(qū)別及說明
這篇文章主要介紹了react中value與defaultValue的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05
聊聊ant?design?charts?獲取后端接口數(shù)據(jù)展示問題
今天在做項目的時候遇到幾個讓我很頭疼的問題,一個是通過后端接口成功訪問并又返回數(shù)據(jù),但拿不到數(shù)據(jù)值。其二是直接修改state中的data,console中數(shù)組發(fā)生變化但任然數(shù)據(jù)未顯示,這篇文章主要介紹了ant?design?charts?獲取后端接口數(shù)據(jù)展示,需要的朋友可以參考下2022-05-05
30分鐘精通React今年最勁爆的新特性——React Hooks
這篇文章主要介紹了30分鐘精通React今年最勁爆的新特性——React Hooks,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫,Zustand以簡潔易用、靈活性高及最小化原則等特點脫穎而出,旨在提供簡單而強大的狀態(tài)管理功能2024-10-10

