【React hooks】useEffect的依赖项和清理函数

//useEffect()中的回调函数会在组件每次渲染完毕之后执行，这也是它和写在函数体中代码的最大的不同，函数体中的代码会在组件渲染前执行，而useEffect()中的代码是在组件渲染后才执行，这就避免了代码的执行影响到组件渲染。


//没有第二个参数 -->每次渲染完毕后执行
useEffect(() => {
   console.log('effect执行了')
})

//有第二个参数，但是空数组 -->第一次渲染完毕后执行（组件初始化）
useEffect(() => {
    console.log('effect执行了')
},[])

//有第二个参数，不是空数组 --> 每次渲染后，如果数组中的变量发生变化，就会执行。
    //我们通常把effect中使用的所有变量都设置为依赖项。
useEffect(() => {
    console.log('effect执行了')
}, [variable1,var2])


/* 
清除Effect
组件的每次重新渲染effect都会执行，有一些情况里，两次effect执行会互相影响。比如，在effect中设置了一个定时器，总不能每次effect执行都设置一个新的定时器，所以我们需要在一个effect执行前，清除掉前一个effect所带来的影响。要实现这个功能，可以在effect中将一个函数作为返回值返回，像是这样： */

useEffect(() => {
    /* 编写那些会产生副作用的代码 */

    return () => {
        /* 这个函数会在下一次effect执行钱调用 */
    };
});

/* effect返回的函数，会在下一次effect执行前调用，我们可以在这个函数中清除掉前一次effect执行所带来的影响。 */