小編給大家分享一下使用React Hooks時(shí)要避免哪些錯(cuò)誤，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、孟連網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為孟連等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
主要介紹一下 React hooks 錯(cuò)誤使用方式，以及如何解決它們。
不要更改 Hook 調(diào)用順序
不要使用過(guò)時(shí)狀態(tài)
不要?jiǎng)?chuàng)建過(guò)時(shí)的閉包
不要將狀態(tài)用于基礎(chǔ)結(jié)構(gòu)數(shù)據(jù)
不要忘記清理副作用
1.不要更改 Hook 調(diào)用順序
在寫這篇文章的前幾天，我編寫了一個(gè)通過(guò)id獲取游戲信息的組件，下面是一個(gè)簡(jiǎn)單的版本 FetchGame：
重慶分公司
重慶分公司
function FetchGame({ id }) { if (!id) { return 'Please select a game to fetch'; } const [game, setGame] = useState({ name: '', description: '' }); useEffect(() => { const fetchGame = async () => { const response = await fetch(`/api/game/${id}`); const fetchedGame = await response.json(); setGame(fetchedGame); }; fetchGame(); }, [id]); return ( Name: {game.name} Description: {game.description} );組件FetchGame 接收 id(即要獲取的游戲的ID)。useEffect() 在await fetch(/game/${id})提取游戲信息并將其保存到狀態(tài)變量game中。
打開演示(https://codesandbox.io/s/hooks-order-warning-rdxpg?file=/pages/index.js) 。組件正確地執(zhí)行獲取操作，并使用獲取的數(shù)據(jù)更新狀態(tài)。但是看看tab Eslint警告: 有 Hook 執(zhí)行順序不正確的問(wèn)題。
問(wèn)題發(fā)生在這一判斷：
function FetchGame({ id }) { if (!id) { return 'Please select a game to fetch'; } // ... }當(dāng)id為空時(shí)，組件渲染'Please select a game to fetch'并退出，不調(diào)用任何 Hook。
但是，如果 id不為空(例如等于'1')，則會(huì)調(diào)用useState()和 useEffect()。
有條件地執(zhí)行 Hook 可能會(huì)導(dǎo)致難以調(diào)試的意外錯(cuò)誤。React Hook的內(nèi)部工作方式要求組件在渲染之間總是以相同的順序調(diào)用 Hook。
這正是鉤子的第一條規(guī)則:不要在循環(huán)、條件或嵌套函數(shù)內(nèi)調(diào)用 Hook。
解決方法就是將條件判斷放到 Hook 后面：
function FetchGame({ id }) { const [game, setGame] = useState({ name: '', description: '' }); useEffect(() => { const fetchGame = async () => { const response = await fetch(`/api/game/${id}`); const fetchedGame = await response.json(); setGame(fetchedGame); }; if (id) { fetchGame(); } }, [id]); if (!id) { return 'Please select a game to fetch'; } return ( Name: {game.name} Description: {game.description} ); }現(xiàn)在，無(wú)論id是否為空，useState()和useEffect() 總是以相同的順序被調(diào)用，這就是 Hook 應(yīng)該始終被調(diào)用的方式。
2.不要使用過(guò)時(shí)狀態(tài)
下面的組件MyIncreaser在單擊按鈕時(shí)增加狀態(tài)變量count:
function MyIncreaser() { const [count, setCount] = useState(0); const increase = useCallback(() => { setCount(count + 1); }, [count]); const handleClick = () { increase(); increase(); increase(); }; return ( <> Increase Counter: {count} ); } 這里有趣一點(diǎn)的是，handleClick調(diào)用了3次狀態(tài)更新。
現(xiàn)在，在打開演示之前，問(wèn)一個(gè)問(wèn)題：如果單擊一次按鈕，計(jì)數(shù)器是否增加3?
打開演示(https://codesandbox.io/s/stale-variable-jo32q?file=/src/index.js)，點(diǎn)擊按鈕一次，看看結(jié)果。
不好意思，即使在handleClick()中3次調(diào)用了increase()，計(jì)數(shù)也只增加了1。
問(wèn)題在于setCount(count + 1)狀態(tài)更新器。當(dāng)按鈕被點(diǎn)擊時(shí)，React調(diào)用setCount(count + 1)3次
const handleClick = () { increase(); increase(); increase(); }; / 等價(jià): const handleClick = () { setCount(count + 1); // count variable is now stale setCount(count + 1); setCount(count + 1); };setCount(count + 1)的第一次調(diào)用正確地將計(jì)數(shù)器更新為count + 1 = 0 + 1 = 1。但是，接下來(lái)的兩次setCount(count + 1)調(diào)用也將計(jì)數(shù)設(shè)置為1，因?yàn)樗鼈兪褂昧诉^(guò)時(shí)的stale狀態(tài)。
通過(guò)使用函數(shù)方式更新狀態(tài)來(lái)解決過(guò)時(shí)的狀態(tài)。我們用setCount(count => count + 1)代替setCount(count + 1)：
function MyIncreaser() { const [count, setCount] = useState(0); const increase = useCallback(() => { setCount(count => count + 1); }, []); const handleClick = () { increase(); increase(); increase(); }; return ( <> Increase Counter: {count} ); } 這里有一個(gè)好規(guī)則可以避免遇到過(guò)時(shí)的變量：
如果你使用當(dāng)前狀態(tài)來(lái)計(jì)算下一個(gè)狀態(tài)，總是使用函數(shù)方式來(lái)更新狀態(tài):setValue(prevValue => prevValue + someResult)。
3.不要?jiǎng)?chuàng)建過(guò)時(shí)的閉包
React Hook 很大程序上依賴于閉包的概念。依賴閉包是它們?nèi)绱烁挥斜憩F(xiàn)力的原因。
JavaScript 中的閉包是從其詞法作用域捕獲變量的函數(shù)。不管閉包在哪里執(zhí)行，它總是可以從定義它的地方訪問(wèn)變量。
當(dāng)使用 Hook 接受回調(diào)作為參數(shù)時(shí)(如useEffect(callback, deps)， useCallback(callback, deps))，你可能會(huì)創(chuàng)建一個(gè)過(guò)時(shí)的閉包，一個(gè)捕獲了過(guò)時(shí)的狀態(tài)或變量的閉包。
我們來(lái)看看一個(gè)使用useEffect(callback, deps) 而忘記正確設(shè)置依賴關(guān)系時(shí)創(chuàng)建的過(guò)時(shí)閉包的例子。
在組件
const [count, setCount] = useState(0); useEffect(function() { setInterval(function log() { console.log(`Count is: ${count}`); }, 2000); }, []); const handleClick = () => setCount(count => count + 1); return ( <> Increase Counter: {count} ); } 打開演示(https://codesandbox.io/s/stale-variable-jo32q?file=/src/index.js)，點(diǎn)擊按鈕。在控制臺(tái)查看，每2秒打印的都 是 Count is: 0,，不管count狀態(tài)變量的實(shí)際值是多少。
為啥這樣子?
第一次渲染時(shí)， log 函數(shù)捕獲到的 count 的值為 0。
之后，當(dāng)按鈕被單擊并且count增加時(shí)，setInterval取到的 count 值仍然是從初始渲染中捕獲count為0的值。log 函數(shù)是一個(gè)過(guò)時(shí)的閉包，因?yàn)樗东@了一個(gè)過(guò)時(shí)的狀態(tài)變量count。
解決方案是讓useEffect()知道閉包log依賴于count，并正確重置計(jì)時(shí)器
function WatchCount() { const [count, setCount] = useState(0); useEffect(function() { const id = setInterval(function log() { console.log(`Count is: ${count}`); }, 2000); return () => clearInterval(id); }, [count]); const handleClick = () => setCount(count => count + 1); return ( <> Increase Counter: {count} ); } 正確設(shè)置依賴關(guān)系后，一旦count發(fā)生變化，useEffect()就會(huì)更新setInterval()的閉包。
為了防止閉包捕獲舊值：確保提供給 Hook 的回調(diào)函數(shù)中使用依賴項(xiàng)。
4.不要將狀態(tài)用于基礎(chǔ)結(jié)構(gòu)數(shù)據(jù)
有一次，我需要在狀態(tài)更新上調(diào)用副作用，在第一個(gè)渲染不用調(diào)用副作用。useEffect(callback, deps)總是在掛載組件后調(diào)用回調(diào)函數(shù):所以我想避免這種情況。
我找到了以下的解決方案
function MyComponent() { const [isFirst, setIsFirst] = useState(true); const [count, setCount] = useState(0); useEffect(() => { if (isFirst) { setIsFirst(false); return; } console.log('The counter increased!'); }, [count]); return ( setCount(count => count + 1)}> Increase ); } 狀態(tài)變量isFirst用來(lái)判斷是否是第一次渲染。一旦更新setIsFirst(false)，就會(huì)出現(xiàn)另一個(gè)無(wú)緣無(wú)故的重新渲染。
保持count狀態(tài)是有意義的，因?yàn)榻缑嫘枰秩?count 的值。但是，isFirst不能直接用于計(jì)算輸出。
是否為第一個(gè)渲染的信息不應(yīng)存儲(chǔ)在該狀態(tài)中?；A(chǔ)結(jié)構(gòu)數(shù)據(jù)，例如有關(guān)渲染周期(即首次渲染，渲染數(shù)量)，計(jì)時(shí)器ID(setTimeout()，setInterval())，對(duì)DOM元素的直接引用等詳細(xì)信息，應(yīng)使用引用useRef()進(jìn)行存儲(chǔ)和更新。
我們將有關(guān)首次渲染的信息存儲(chǔ)到 Ref 中：
const isFirstRef = useRef(true); const [count, setCount] = useState(0); useEffect(() => { if (isFirstRef.current) { isFirstRef.current = false; return; } console.log('The counter increased!'); }, [count]); return ( setCounter(count => count + 1)}> Increase ); isFirstRef是一個(gè)引用，用于保存是否為組件的第一個(gè)渲染的信息。isFirstRef.current屬性用于訪問(wèn)和更新引用的值。
重要說(shuō)明：更新參考isFirstRef.current = false不會(huì)觸發(fā)重新渲染。
5.不要忘記清理副作用
很多副作用，比如獲取請(qǐng)求或使用setTimeout()這樣的計(jì)時(shí)器，都是異步的。
如果組件卸載或不再需要該副作用的結(jié)果，請(qǐng)不要忘記清理該副作用。
下面的組件有一個(gè)按鈕。當(dāng)按鈕被點(diǎn)擊時(shí)，計(jì)數(shù)器每秒鐘延遲增加1：
function DelayedIncreaser() { const [count, setCount] = useState(0); const [increase, setShouldIncrease] = useState(false); useEffect(() => { if (increase) { setInterval(() => { setCount(count => count + 1) }, 1000); } }, [increase]); return ( <> setShouldIncrease(true)}> Start increasing Count: {count} ); } 打開演示(https://codesandbox.io/s/unmounted-state-update-n1d3u?file=/src/index.js)，點(diǎn)擊開始按鈕。正如預(yù)期的那樣，狀態(tài)變量count每秒鐘都會(huì)增加。
在進(jìn)行遞增操作時(shí)，單擊umount 按鈕，卸載組件。React會(huì)在控制臺(tái)中警告更新卸載組件的狀態(tài)。
修復(fù)DelayedIncreaser很簡(jiǎn)單：只需從useEffect()的回調(diào)中返回清除函數(shù)：
// ... useEffect(() => { if (increase) { const id = setInterval(() => { setCount(count => count + 1) }, 1000); return () => clearInterval(id); } }, [increase]); // ...也就是說(shuō)，每次編寫副作用代碼時(shí)，都要問(wèn)自己它是否應(yīng)該清理。計(jì)時(shí)器，頻繁請(qǐng)求(如上傳文件)，sockets 幾乎總是需要清理。
6. 總結(jié)
從React鉤子開始的最好方法是學(xué)習(xí)如何使用它們。
但你也會(huì)遇到這樣的情況:你無(wú)法理解為什么他們的行為與你預(yù)期的不同。知道如何使用React Hook還不夠:你還應(yīng)該知道何時(shí)不使用它們。
首先不要做的是有條件地渲染 Hook 或改變 Hook 調(diào)用的順序。無(wú)論P(yáng)rops 或狀態(tài)值是什么，React都期望組件總是以相同的順序調(diào)用Hook。
要避免的第二件事是使用過(guò)時(shí)的狀態(tài)值。要避免過(guò)時(shí) 狀態(tài)，請(qǐng)使用函數(shù)方式更新狀態(tài)。
不要忘記指出接受回調(diào)函數(shù)作為參數(shù)的 Hook 的依賴關(guān)系:例如useEffect(callback, deps)，useCallback(callback, deps),這可以解決過(guò)時(shí)閉包問(wèn)題。
不要將基礎(chǔ)結(jié)構(gòu)數(shù)據(jù)(例如有關(guān)組件渲染周期，setTimeout()或setInterval())存儲(chǔ)到狀態(tài)中。經(jīng)驗(yàn)法則是將此類數(shù)據(jù)保存在 Ref 中。
以上是“使用React Hooks時(shí)要避免哪些錯(cuò)誤”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
