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');
        };
    });