使用useEffect及踩坑記錄

useEffect 介紹

useEffect時(shí)reactHook中最重要，最常用的hook之一。

useEffect相當(dāng)于react中的什么生命周期呢？

這個(gè)問題在react官網(wǎng)中有過介紹，在使用的過程中，容易被忽略，在面試的時(shí)候卻經(jīng)常被問及，（面試造航母，上班擰螺絲？），開個(gè)玩笑這個(gè)問題并不難回答，下面是react官方的原話：

如果你熟悉 React class 的生命周期函數(shù)，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個(gè)函數(shù)的組合。

• componentDidMount 組件掛載
• componentDidUpdate 組件更新
• componentWillUnmount 組件將要摧毀

useEffect需要傳遞兩個(gè)參數(shù)，第一個(gè)參數(shù)是邏輯處理函數(shù)，第二個(gè)參數(shù)是一個(gè)數(shù)組

用法

useEffect(() => {
/** 執(zhí)行邏輯 */
},[])

重要理解

一、第二個(gè)參數(shù)存放變量，當(dāng)數(shù)組存放變量發(fā)生改變時(shí)，第一個(gè)參數(shù)，邏輯處理函數(shù)將會(huì)被執(zhí)行

二、第二個(gè)參數(shù)可以不傳，不會(huì)報(bào)錯(cuò)，但瀏覽器會(huì)無線循環(huán)執(zhí)行邏輯處理函數(shù)。

useEffect(() => {
/** 執(zhí)行邏輯 */
})

三、第二個(gè)參數(shù)如果只傳一個(gè)空數(shù)組，邏輯處理函數(shù)里面的邏輯只會(huì)在組件掛載時(shí)執(zhí)行一次 ，不就是相當(dāng)于 componentDidMount

useEffect(() => {
/** 執(zhí)行邏輯 */
},[])

四、第二個(gè)參數(shù)如果不為空數(shù)組，如下

const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 執(zhí)行邏輯 */
},[a,b])

邏輯處理函數(shù)會(huì)在組件掛載時(shí)執(zhí)行一次和(a或者b變量在棧中的值發(fā)生改變時(shí)執(zhí)行一次) 這是不是相當(dāng)于componentDidMount 和 componentDidUpdate 的結(jié)合

五、useEffect第一個(gè)參數(shù)可以返回一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)將會(huì)在組件被摧毀之前和再一次觸發(fā)更新時(shí)，將之前的副作用清除掉。這就相當(dāng)于componentWillUnmount。

useEffect去除副作用。我們可能會(huì)在組件即將被掛載的時(shí)候創(chuàng)建一些不斷循環(huán)的訂閱（計(jì)時(shí)器，或者遞歸循環(huán)）。在組件被摧毀之前，或者依賴數(shù)組的元素更新后，應(yīng)該將這些訂閱也給摧毀掉。

比如以下的情況（沒有去除計(jì)時(shí)器，增大不必要的開銷和代碼風(fēng)險(xiǎn))

const [time, setTime] = useState(0)
useEffect(() => {
?? ?const InterVal = setInterval(() => {
?? ??? ?setTime(time + 1)
?? ?},1000)
},[])

利用第五點(diǎn)，在組件被摧毀前去除計(jì)時(shí)器。

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)這種情況可能有兩種原因。

沒傳第二個(gè)參數(shù)

useEffect(() => {
/** 執(zhí)行邏輯 */
})

2、你在useEffect執(zhí)行函數(shù)里面改變了useEffect監(jiān)測(cè)的變量

const [a, setA] = useState(1);
useEffect(() => {
/** 執(zhí)行邏輯 */
setA(a + 1)
},[a])

解決的方法 不要在useEffect第一參數(shù)執(zhí)行函數(shù)中去改變第二參數(shù)依賴元素的地址的值。當(dāng)依賴元素的地址的值發(fā)生改變，又會(huì)執(zhí)行一次執(zhí)行函數(shù)，這不是無限循環(huán)么。

3、useEffect監(jiān)測(cè)不到依賴數(shù)組元素的變化。

只有一種可能，依賴數(shù)組元素的地址的值根本就沒變，比如:

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
?? ?setA((old) => {
?? ?old.b = 'yx'
?? ?return old
?? ?})
}
useEffect(() => {
/** 當(dāng)組件掛載時(shí)執(zhí)行一次changeA */
changeA ()
},[])
/**當(dāng)changeA執(zhí)行卻沒有打印 a*/
useEffect(() => {
/** 執(zhí)行邏輯 */
console.log(a)
},[a])

是因?yàn)閏hangeA沒有真正的改變a在棧中的值（地址的值），只是改變了a在堆中的值。

useEffect監(jiān)測(cè)不到堆中值得變化，所有引用類型數(shù)據(jù)都應(yīng)該注意這一點(diǎn)。

解決的辦法：

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
?? ?setA((old) => {
?? ?const newA = {...old}
?? ?newA .b = 'yx'
?? ?return newA?
?? ?})
}
useEffect(() => {
/** 當(dāng)組件掛載時(shí)執(zhí)行一次changeA */
changeA ()
},[])
/**當(dāng)changeA執(zhí)行打印 ?{b:'yx',c:'18'} ?*/
useEffect(() => {
/** 執(zhí)行邏輯 */
console.log(a)
},[a])

hooks中useEffect()使用總結(jié)

常見使用

獲取數(shù)據(jù)案例：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
? const [data, setData] = useState({ hits: [] });
? useEffect(() => {
? ? const fetchData = async () => {
? ? ? const result = await axios(
? ? ? ? 'https://hn.algolia.com/api/v1/search?query=redux',
? ? ? );
? ? ? setData(result.data);
? ? };
? ? fetchData();
? }, []);
? return (
? ? <ul>
? ? ? {data.hits.map(item => (
? ? ? ? <li key={item.objectID}>
? ? ? ? ? <a href={item.url}>{item.title}</a>
? ? ? ? </li>
? ? ? ))}
? ? </ul>
? );
}
export default App;

上面例子中，useState()用來生成一個(gè)狀態(tài)變量（data），保存獲取的數(shù)據(jù)；useEffect()的副效應(yīng)函數(shù)內(nèi)部有一個(gè) async 函數(shù)，用來從服務(wù)器異步獲取數(shù)據(jù)。拿到數(shù)據(jù)以后，再用setData()觸發(fā)組件的重新渲染。

由于獲取數(shù)據(jù)只需要執(zhí)行一次，所以上例的useEffect()的第二個(gè)參數(shù)為一個(gè)空數(shù)組

附線上運(yùn)行代碼

useEffect() 的第二個(gè)參數(shù)說明

有時(shí)候，我們不希望useEffect()每次渲染都執(zhí)行，這時(shí)可以使用它的第二個(gè)參數(shù)，使用一個(gè)數(shù)組指定副效應(yīng)函數(shù)的依賴項(xiàng)，只有依賴項(xiàng)發(fā)生變化，才會(huì)重新渲染。

function Welcome(props) {
? useEffect(() => {
? ? document.title = `Hello, ${props.name}`;
? }, [props.name]);
? return <h1>Hello, {props.name}</h1>;
}

上面例子中，useEffect()的第二個(gè)參數(shù)是一個(gè)數(shù)組，指定了第一個(gè)參數(shù)（副效應(yīng)函數(shù)）的依賴項(xiàng)（props.name）。只有該變量發(fā)生變化時(shí)，副效應(yīng)函數(shù)才會(huì)執(zhí)行。如果第二個(gè)參數(shù)是一個(gè)空數(shù)組，就表明副效應(yīng)參數(shù)沒有任何依賴項(xiàng)。

因此，副效應(yīng)函數(shù)這時(shí)只會(huì)在組件加載進(jìn)入 DOM 后執(zhí)行一次，后面組件重新渲染，就不會(huì)再次執(zhí)行。這很合理，由于副效應(yīng)不依賴任何變量，所以那些變量無論怎么變，副效應(yīng)函數(shù)的執(zhí)行結(jié)果都不會(huì)改變，所以運(yùn)行一次就夠了。

useEffect() 第一個(gè)函數(shù)參數(shù)的返回值

副效應(yīng)是隨著組件加載而發(fā)生的，那么組件卸載時(shí)，可能需要清理這些副效應(yīng)。

useEffect()允許返回一個(gè)函數(shù)，在組件卸載時(shí)，執(zhí)行該函數(shù)，清理副效應(yīng)。如果不需要清理副效應(yīng)，useEffect()就不用返回任何值。

useEffect(() => {
? const subscription = props.source.subscribe();
? return () => {
? ? subscription.unsubscribe();
? };
}, [props.source]);

上面例子中，useEffect()在組件加載時(shí)訂閱了一個(gè)事件，并且返回一個(gè)清理函數(shù)，在組件卸載時(shí)取消訂閱。

實(shí)際使用中，由于副效應(yīng)函數(shù)默認(rèn)是每次渲染都會(huì)執(zhí)行，所以清理函數(shù)不僅會(huì)在組件卸載時(shí)執(zhí)行一次，每次副效應(yīng)函數(shù)重新執(zhí)行之前，也會(huì)執(zhí)行一次，用來清理上一次渲染的副效應(yīng)。

useEffect() 的注意點(diǎn)

使用useEffect()時(shí)，有一點(diǎn)需要注意。如果有多個(gè)副效應(yīng)，應(yīng)該調(diào)用多個(gè)useEffect()，而不應(yīng)該合并寫在一起。

錯(cuò)誤寫法：

function App() {
? const [varA, setVarA] = useState(0);
? const [varB, setVarB] = useState(0);
? useEffect(() => {
? ? const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
? ? const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);
? ? return () => {
? ? ? clearTimeout(timeoutA);
? ? ? clearTimeout(timeoutB);
? ? };
? }, [varA, varB]);
? return <span>{varA}, {varB}</span>;
}

上面的例子是錯(cuò)誤的寫法，副效應(yīng)函數(shù)里面有兩個(gè)定時(shí)器，它們之間并沒有關(guān)系，其實(shí)是兩個(gè)不相關(guān)的副效應(yīng)，不應(yīng)該寫在一起。正確的寫法是將它們分開寫成兩個(gè)useEffect()。

正確寫法：

function App() {
? const [varA, setVarA] = useState(0);
? const [varB, setVarB] = useState(0);
? useEffect(() => {
? ? const timeout = setTimeout(() => setVarA(varA + 1), 1000);
? ? return () => clearTimeout(timeout);
? }, [varA]);
? useEffect(() => {
? ? const timeout = setTimeout(() => setVarB(varB + 2), 2000);
? ? return () => clearTimeout(timeout);
? }, [varB]);
? return <span>{varA}, {varB}</span>;
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論