這一次，徹底搞懂useEffect

什麼是useEffect?

讓函數型元件擁有處理副作用的能力，類似生命周期函數。

1. useEffect執行時機

可以把useEffect看做componentDidMount,componentDidUpdate,componentWillUnmount這三個函數的組合。

• 當做componentDidMount和componentDidUpdate的時候

function App() {
    const [count,setCount] = useState(0);
    // 元件挂載完成之後 或 元件資料更新完成之後 執行
    useEffect(() => {
        console.log('元件挂載完成之後 或 元件資料更新完成之後 執行');
    })
    return (
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    )
}           

• 僅當做comonentDidMount的時候

useEffect(() => {
    console.log('僅當做componentDidMount');
},[])           

• 當做componentWillunmount的時候(注意：這裡不是僅當做componentWillunmount)

useEffect(() => () => {
    console.log('當做componentWillUnmount');
})           

2. useEffect的使用方法示例

1. 為window對象添加滾動事件。（挂載完成後綁定事件，解除安裝元件後解除綁定）

function App() {
    function onScroll() {
        console.log('監聽到頁面發生滾動了');
    }
    useEffect(() => {
        window.addEventListener('scroll',onScroll);
        return () => {
            // 解除安裝元件時解除對事件的綁定
            window.removeEventListener('scroll',onScroll);
        }
    })
    return (
        <div>
            App 
        </div>
    )
}           

1. 設定定時器讓count數值每隔一秒增加1。

function App() {
    
    const [count,setCount] = useState(0);
    useEffect(() => {
        const timeId = setInterval(() => {
           setCount(count => count + 1); 
        },1000)
        return () => {
            clearInterval(timeId);
        }
    },[])
    return (
        <div>
            <h1>目前求和為：{count}</h1> 
        </div>
    )
}           

3. useEffect解決的問題

1. 将一組相幹的業務邏輯歸置到了同一個副作用函數中.
2. 簡化重複代碼,使元件内部代碼更加清晰.

4：useEffect的第二個參數

• 隻有指定資料發生變化的時候才觸發effect

useEffect(() => {
    document.title = count;
}, [count])            

5：useEffect結合異步函數

在useEffect中直接使用async和await是會報錯的，推薦使用立即執行函數來包裹異步函數。

function getData() {
    return new Promise(resolve => {
        resolve({msg: 'Hello'})
    })
}
function App() {

    useEffect(() => {
        (async function () {
            const result = await getData();
            console.log(result);
        })()
    },[])
    
    return (
        <div>
            App
        </div>
    )
}           

參考文獻

• 官方文檔