創(chuàng)建日期： 2021年4月6日
最近帶新人云稚，經(jīng)常被求助隧饼，“無(wú)限循環(huán)了，怎么辦呀”静陈？
琢磨了一下燕雁，寫(xiě)下這篇筆記。本篇是基于使用react hooks的基礎(chǔ)上窿给，完成的贵白。
1. useEffect
副作用。簡(jiǎn)單點(diǎn)說(shuō)崩泡，每次進(jìn)入新畫(huà)面的時(shí)候，畫(huà)面里如果有這個(gè)方法猬膨，都會(huì)被調(diào)用角撞。如果單純的React項(xiàng)目，那么很可能就是它的問(wèn)題勃痴。
useEffect(() => {
// 代碼...
}, [這里是依賴(lài)]);
調(diào)查方法：
- 首先谒所，檢查，添加依賴(lài)的中括號(hào)“[ ]”是否添加了沛申？新人劣领，有的會(huì)忘記寫(xiě)這個(gè)。
// 錯(cuò)誤例子
useEffect(() => {
// 代碼...
}); // 依賴(lài)的中括號(hào)“[ ]”忘記寫(xiě)了
- 把依賴(lài)清空铁材，看看是否還死循環(huán)尖淘？
- 如果注釋掉依賴(lài)，死循環(huán)解決了的話著觉，那么我們要排查依賴(lài)的項(xiàng)目村生。
-
依賴(lài)?yán)锏淖兞坷铮嬖谕ㄟ^(guò)
useState定義的狀態(tài)變量饼丘；
那么趁桃，副作用的內(nèi)部，是否調(diào)用其對(duì)應(yīng)的setState方法肄鸽？如果有卫病，那么你要修改下邏輯了，但是典徘，你不能用了該狀態(tài)變量蟀苛，卻不把它加在依賴(lài)?yán)铩Ｈ绻患釉谝蕾?lài)?yán)锢谜敲茨愀弊饔美锏膕tate屹逛，永遠(yuǎn)都是初始值础废。
例子：（代碼是直接在簡(jiǎn)書(shū)上盲敲的，有錯(cuò)誤的話罕模，請(qǐng)見(jiàn)諒）
const [visible, setVisible] = useState(false);
useEffect(() => {
setVisible(!visible);
}, [visible]);
比如這個(gè)评腺，我們想根據(jù)state的當(dāng)前值，來(lái)決定接下來(lái)的設(shè)定淑掌。如果按上面的寫(xiě)法蒿讥，就會(huì)出現(xiàn)死循環(huán)。我們可以這樣寫(xiě)：
const [visible, setVisible] = useState(false);
useEffect(() => {
setVisible(preState => !preState);
}, []);
-
依賴(lài)?yán)锏淖兞颗淄螅嬖谝粋€(gè)普通的變量芋绸；
那么，請(qǐng)嘗試用useMemo包裹一下這個(gè)普通變量担敌；
例子：
const array = new Array();
useEffect(() => {
// do something with array...
// call setState(...)
}, [array]);
注意：依賴(lài)?yán)锏淖兞克ち玻玫氖菧\比較，因此全封，當(dāng)你因?yàn)檎{(diào)用setState重新刷新畫(huà)面的時(shí)候马昙，array會(huì)被認(rèn)為是一個(gè)新的對(duì)象，因此刹悴，useEffect會(huì)被再次調(diào)用行楞。
修改方法：
const array = useMemo(() => {
return myArray;
}, [myArray]);
//...省略
-
依賴(lài)?yán)铮嬖诤瘮?shù)
那么土匀，請(qǐng)嘗試用useCallback包裹一下這個(gè)函數(shù)子房。
跟2的原理一樣，函數(shù)用useCallback包裹一下：
const getArray = useCallback(() => {
// do something to get array
return ary;
}, []);
//...省略
- 如果依賴(lài)注釋掉了就轧，還是死循環(huán)证杭，那么找找相關(guān)的地方吧，可能定位就定錯(cuò)了钓丰。
2. useFouceEffect
手機(jī)項(xiàng)目中躯砰，有時(shí)候會(huì)用到這個(gè)hooks（如果單詞拼寫(xiě)錯(cuò)了，請(qǐng)見(jiàn)諒）携丁，一般琢歇，定義里面的函數(shù)時(shí)，都會(huì)用useCallback包裹一下梦鉴，否則李茫，容易出現(xiàn)死循環(huán)。另外肥橙，就是useCallback的依賴(lài)魄宏，排查方法與上面相同。
3. 自定義hooks
自定義hooks的好處存筏，就是多個(gè)畫(huà)面宠互，可以復(fù)用同一個(gè)方法味榛，現(xiàn)在也越來(lái)越被大家所喜歡。
在返回定義的方法（函數(shù)）時(shí)予跌，推薦你用useCallback包裹一下搏色，否則，其他人如果在useEffect等地方調(diào)用它的時(shí)候券册，很容易引起死循環(huán)频轿。
好吧，先說(shuō)到這里烁焙。大概就這么些情況航邢。因?yàn)槊Γ晕醇邮吕a骄蝇。
如果你出現(xiàn)死循環(huán)膳殷，無(wú)法解決的話，可以給筆者留言乞榨。筆者也很想挑戰(zhàn)一下秽之。
如果，我的文章吃既，解決了你的問(wèn)題，麻煩動(dòng)動(dòng)你福氣的小手跨细，給點(diǎn)個(gè)贊鹦倚，我想知道，我的排查方法到底管不管用冀惭。
望本篇能把那些掙扎在死循環(huán)里的小伙伴們震叙，拖上岸??
