React-useEffect使用

1.useEffect

　　react hooks

　　使用：

　　useEffect(fn,dep)

　　　　第一個參數是函數，第二個參數是依賴項，可不傳

　　　　1.當沒有給依賴項時，則useEffect每次都會執行里面的函數

　　　　2.當給依賴項時，依賴項發生改變時，useEffect才會執行里面的函數

　　　　3.當依賴項為一個空數組時，則頁面加載后只執行一次，后面不在執行

import React, { useEffect, useState } from 'react';

const App = () => {
    const [count, setCount] = useState(0);

　　// componentDidMount
    useEffect(() => {
        console.log('我只執行一次');
    }, []);
　　
　　
　　// update生命周期
    useEffect(() => {
        console.log('count變化了，我就執行');
    }, [count]);

　　// update
    useEffect(() => {
        console.log('我每次都執行');
    });
    const clickEvent = () => {
        setCount(preCount => {
            console.log('上一次的值:', preCount);
            return preCount + 1;
        });
    };
    return (
        <div className='App'>
            <button onClick={clickEvent}>increment</button>
            <p>{count}</p>
        </div>
    );
};

export default App;

　　　　清除副作用

　　　　在useEffect函數中返回一個函數，則當組件卸載時就會執行清除副作用函數

    useEffect(() => {
        console.log('我每次都執行');
　　　　　// componentWillUnMount
        return () => {
            console.log('clean');
        };
    });