建站
咨詢
售后
建站咨詢
新聞中心
相信很多用過 hooks 的人都遇到過這個坑，今天我們來思考下 hooks 閉包陷阱的原因和怎么解決。
創(chuàng)新互聯(lián)于2013年成立，先為盈江等服務建站，盈江等地企業(yè)，進行企業(yè)商務咨詢服務。為盈江企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
首先這樣一段代碼，大家覺得有問題沒：
import { useEffect, useState } from 'react';
function Dong() {
const [count,setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount(count + 1);
}, 500);
}, []);
useEffect(() => {
setInterval(() => {
console.log(count);
}, 500);
}, []);
return guang;
}
export default Dong;用 useState 創(chuàng)建了個 count 狀態(tài)，在一個 useEffect 里定時修改它，另一個 useEffect 里定時打印最新的 count 值。
我們跑一下：
打印的并不是我們預期的 0、1、2、3，而是 0、0、0、0，這是為什么呢?
這就是所謂的閉包陷阱。
首先，我們回顧下 hooks 的原理：hooks 就是在 fiber 節(jié)點上存放了 memorizedState 鏈表，每個 hook 都從對應的鏈表元素上存取自己的值。
比如上面 useState、useEffect、useEffect 的 3 個 hook 就對應了鏈表中的 3 個 memorizedState：
然后 hook 是存取各自的那個 memorizedState 來完成自己的邏輯。
hook 鏈表有創(chuàng)建和更新兩個階段，也就是 mount 和 update，第一次走 mount 創(chuàng)建鏈表，后面都走 update。
比如 useEffect 的實現(xiàn)：
特別要注意 deps 參數(shù)的處理，如果 deps 為 undefined 就被當作 null 來處理了。
那之后又怎么處理的呢?
會取出新傳入的 deps 和之前存在 memorizedState 的 deps 做對比，如果沒有變，就直接用之前傳入的那個函數(shù)，否則才會用新的函數(shù)。
deps 對比的邏輯很容易看懂，如果是之前的 deps 是 null，那就返回 false 也就是不相等，否則遍歷數(shù)組依次對比：
所以：
如果 useEffect 第二個參數(shù)傳入 undefined 或者 null，那每次都會執(zhí)行。
如果傳入了一個空數(shù)組，只會執(zhí)行一次。
否則會對比數(shù)組中的每個元素有沒有改變，來決定是否執(zhí)行。
這些我們應該比較熟了，但是現(xiàn)在從源碼理清了。
同樣，useMemo、useCallback 等也是同樣的 deps 處理：
理清了 useEffect 等 hook 是在哪里存取數(shù)據(jù)的，怎么判斷是否執(zhí)行傳入的函數(shù)的之后，再回來看下那個閉包陷阱問題。
我們是這樣寫的：
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1);
}, 500);
}, []);
useEffect(() => {
const timer = setInterval(() => {
console.log(count);
}, 500);
}, []);deps 傳入了空數(shù)組，所以只會執(zhí)行一次。
對應的源碼實現(xiàn)是這樣的：
如果是需要執(zhí)行的 effect 會打上 HasEffect 的標記，然后后面會執(zhí)行：
因為 deps 數(shù)組是空數(shù)組，所以沒有 HasEffect 的標記，就不會再執(zhí)行。
我們知道了為什么只執(zhí)行一次，那只執(zhí)行一次有什么問題呢?定時器確實只需要設置一次呀?
定時器確實只需要設置一次沒錯，但是在定時器里用到了會變化的 state，這就有問題了：
deps 設置了空數(shù)組，那多次 render，只有第一次會執(zhí)行傳入的函數(shù)：
但是 state 是變化的呀，執(zhí)行的那個函數(shù)卻一直引用著最開始的 state。
怎么解決這個問題呢?
每次 state 變了重新創(chuàng)建定時器，用新的 state 變量不就行了：
也就是這樣的：
import { useEffect, useState } from 'react';
function Dong() {
const [count,setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount(count + 1);
}, 500);
}, [count]);
useEffect(() => {
setInterval(() => {
console.log(count);
}, 500);
}, [count]);
return guang;
}
export default Dong;這樣每次 count 變了就會執(zhí)行引用了最新 count 的函數(shù)了：
現(xiàn)在確實不是全 0 了，但是這亂七八遭的打印是怎么回事?
那是因為現(xiàn)在確實是執(zhí)行傳入的 fn 來設置新定時器了，但是之前的那個沒有清楚呀，需要加入一段清除邏輯：
import { useEffect, useState } from 'react';
function Dong() {
const [count,setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1);
}, 500);
return () => clearInterval(timer);
}, [count]);
useEffect(() => {
const timer = setInterval(() => {
console.log(count);
}, 500);
return () => clearInterval(timer);
}, [count]);
return guang;
}
export default Dong;加上了 clearInterval，每次執(zhí)行新的函數(shù)之前會把上次設置的定時器清掉。
再試一下：
現(xiàn)在就是符合我們預期的了，打印 0、1、2、3、4。
很多同學學了 useEffect 卻不知道要返回一個清理函數(shù)，現(xiàn)在知道為啥了吧。就是為了再次執(zhí)行的時候清掉上次設置的定時器、事件監(jiān)聽器等的。
這樣我們就完美解決了 hook 閉包陷阱的問題。
總結(jié)
hooks 雖然方便，但是也存在閉包陷阱的問題。
我們過了一下 hooks 的實現(xiàn)原理：
在 fiber 節(jié)點的 memorizedState 屬性存放一個鏈表，鏈表節(jié)點和 hook 一一對應，每個 hook 都在各自對應的節(jié)點上存取數(shù)據(jù)。
useEffect、useMomo、useCallback 等都有 deps 的參數(shù)，實現(xiàn)的時候會對比新舊兩次的 deps，如果變了才會重新執(zhí)行傳入的函數(shù)。所以 undefined、null 每次都會執(zhí)行，[] 只會執(zhí)行一次，[state] 在 state 變了才會再次執(zhí)行。
閉包陷阱產(chǎn)生的原因就是 useEffect 等 hook 里用到了某個 state，但是沒有加到 deps 數(shù)組里，這樣導致 state 變了卻沒有執(zhí)行新傳入的函數(shù)，依然引用的之前的 state。
閉包陷阱的解決也很簡單，正確設置 deps 數(shù)組就可以了，這樣每次用到的 state 變了就會執(zhí)行新函數(shù)，引用新的 state。不過還要注意要清理下上次的定時器、事件監(jiān)聽器等。
要理清 hooks 閉包陷阱的原因是要理解 hook 的原理的，什么時候會執(zhí)行新傳入的函數(shù)，什么時候不會。
hooks 的原理確實也不難，就是在 memorizedState 鏈表上的各節(jié)點存取數(shù)據(jù)，完成各自的邏輯的，唯一需要注意的是 deps 數(shù)組引發(fā)的這個閉包陷阱問題。
新聞名稱：從根上理解ReactHooks的閉包陷阱
文章位置：http://m.5511xx.com/article/cdeghsp.html
