useEffect

useEffect():由于函數數組件中不能使用生命周期 ,所以用useEffect()在函數組件中來模擬生命周期鉤子，

基本語法

// 語法和說明：
useEffect(() =>{
    //在此可以執行任何帶副作用操作(發ajax請求數據獲取，設置訂閱、啟動定時器，手動修改真實DOM)
    return () => {
        //組件卸載前執行
        //在此做一些收尾工作，比如清除定時器/取消訂閱等
    }
},[stateValue]) //如果指定的是[],回調函數只會在第一次render（）后執行

一.如果useEffect沒有依賴項
（1）則第一次渲染完畢后，執行callback，等價于類組件中的生命周期 componentDidMount（一般在這個鉤子中做一些初始化的事情）
（2）在組件每一次更新完畢后，也會執行callback，等價于 componentDidUpdate（更新階段）

const StateDom= function StateDom() {
    let [num, setNum] = useState(0),
    useEffect(() => {
        // 獲取最新的狀態值
        console.log('你好周杰倫', num); // 組件第一次渲染和組件更新在控制臺打印
    });
    
    const handle = () => {
        setNum(num + 1);
    };
    return <div className="demo">
        <span className="num">{num}</span>
        <Button type="primary"
            size="small"
            onClick={handle}>
            新增
        </Button>
    </div>;
};

export default StateDom;

二.如果useEffects設置了依賴，但是沒有依賴項
（1）只有第一次渲染完畢后，才會執行callback，每一次視圖更新完畢后，callback不再執行）類似于 componentDidMount

const StateDom= function StateDom() {
    let [num, setNum] = useState(0),
  useEffect(() => {
        console.log('你好周杰倫', num); // 第一次渲染完在控制臺打印
    }, []);
    const handle = () => {
        setNum(num + 1);
    };
    return <div className="demo">
        <span className="num">{num}</span>
        <Button type="primary"
            size="small"
            onClick={handle}>
            新增
        </Button>
    </div>;
};

export default StateDom;

三，如果useEffects設置了依賴項useEffect(callback,[依賴的狀態(多個狀態)])
（1）第一次渲染完畢會執行callback
（2）當依賴的狀態值(或者多個依賴狀態中的一個)發生改變，也會觸發callback執行
（3）但是依賴的狀態如果沒有變化，在組件更新的時候，callback是不會執行的

const StateDom= function StateDom() {
    let [num, setNum] = useState(0),
    useEffect(() => {
          console.log('你好周杰倫', num); 
    }, [num]); 
 
    const handle = () => {
        setNum(num + 1);
    };
    return <div className="demo">
        <span className="num">{num}</span>
        <Button type="primary"
            size="small"
            onClick={handle}>
            新增
        </Button>
    </div>;
};

export default StateDom;

四, 返回的小函數，會在組件釋放的時候執行
useEffect(()=>{
return ()=>{
// 返回的小函數，會在組件釋放的時候執行
// 如果組件更新，會把上一次返回的小函數執行「可以“理解為”上一次渲染的組件釋放了」
};
});

const StateDom= function StateDom() {
    let [num, setNum] = useState(0),
     useEffect(() => {
        return () => {
            // 獲取的是上一次的狀態值
            console.log('你好，鄧紫棋', num);
        };
    });
 
    const handle = () => {
        setNum(num + 1);
    };
    return <div className="demo">
        <span className="num">{num}</span>
        <Button type="primary"
            size="small"
            onClick={handle}>
            新增
        </Button>
    </div>;
};

export default StateDom;