react中useEffect基本用法及底层机制

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;