1.useefect()的基本用法
const [test,settest] = usestate(1)const init=()=>
useeffect(()=>,[test])
紅色'test'則是監聽的資料,這裡的監聽資料要分為兩種,1是基本資料型別,2是物件和陣列
2.監聽原理基本理解.
簡單來說就是當修改後的值不同於修改之前就會執行.test預設為1,settest()之後變成了2,又會執行init(),但是再次settest()之後,test還是2,所以只會執行2次.一次預設,一次更改之後.
但是,當每次執行test都變化時將會無限次執行
const [test,settest] = usestate(1)const init=()=>
useeffect(()=>,[test])
test每次更改都會和上次不一樣,所以他會無限執行
3.監聽物件和陣列
當你在useeffect中監聽物件或陣列的時候,它會無條件無限執行.你可以理解為引用資料型別資料在賦值時每次都生成了乙個新的資料.所以必定會執行.
故,不要把陣列或者物件作為監聽物件.
//不能這麼寫const [test,settest] = usestate()
const init=()=>)
}useeffect(()=>,[test])
解決方案:
如果我每次更改的就是物件,那我怎麼監聽.
1.標記法
同步更新乙個可檢測的資料,然後監聽這個資料.
const [test,settest] = usestate()const [index,setindex] = usestate(0)
const init=()=>)
setindex(1)
}useeffect(()=>,[index])
這要求每個修改都必須要同步修改index,一次都不能少.相當於又引入了乙個資料,還得自己全程盯著,流程多的時候可能會亂.不建議使用
2.加判斷
假如我知道資料的走向,並且可以準確找到臨界點.那我可以通過判斷來掐斷無限更新的流程
const [test,settest] = usestate(1)const init=()=>
useeffect(()=>
else
},[test])
3.物件屬性監聽
通過監聽物件屬性來判斷物件變化,同時符合監聽規則,不會無限執行
const [test,settest] = usestate()const init=()=>)
}useeffect(()=>,[test.name])
4.函式式賦值.
usestate()可以通過返回返回值的方式賦值,在這個函式中可以拿到上次更改的state值,並且阻斷usestate自身
const [test,settest] = usestate(1)const init=()=>
else})}
useeffect(()=>,[test])
5.結合原因從根源上避開這個問題
具體的方案可訪問我的另一篇部落格:hooks中,useeffect無限呼叫問題產生的原因
關於無限分類的呼叫問題！
資料表test是這麼建的，乙個id pid,name。方法一 呼叫此id下所有的子類。function tree pid return arr 此方法返回的是乙個多維陣列，有時候會需要轉化成字串。也提供了方法 cycle function cycle arr return idstr 向上取name...
UseEffect 死迴圈問題記錄
問題 如下 export default props props.data const info,setinfo usestate useeffrct option 當props.data 的值中沒有 option 的時候，就死迴圈了，報錯如下 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接...
無限桃子問題
tong找到n種桃子，而且每種都有無限多個，要將它們放入容量為v的揹包。顯然，tong還是乙個貪心的人，他要在有限的揹包中裝入最大的桃子價錢，給出n種桃子的大小和價錢，求出能放入揹包的桃子的總價錢最大值。有多組測試資料，每組測試資料第一行為2個正整數，分別代表桃子的種數n和揹包的容量v。n v同時為...