useEffect用法

204 阅读1分钟

useEffect在函数组件中可以实现类组件的一些生命周期功能。今天学习了它,简单总结一下。

首先useEffect()有两个参数,第一个是一个回调函数,第二个是数组。它回调函数,回调函数的返回的函数,数组。这三个东西会影响它的执行机制。

1.只有回调函数:useEffect(()=>{})

当只有回调函数时,useEffect会在组件渲染完成后执行回调函数,当函数的任意state改变时,也会执行。

2.有回调函数和数组:useEffect(()=>{},[])

它的数组里面的值,可以理解为useEffect的依赖项,里面的值一般为state,即依赖的v改变,useEffect就执行。不改变就只是组件第一次渲染的时候执行。

我们先看特殊情况

useEffect(()=>{},[])数组内没有值,相当于componentDidMount 数组没有值就代表,没有所依赖的,所以渲染完成时执行一次,就不会执行了。 有值时,useEffect(()=>{},[sate1]),即state1改变后回调就会执行。

3.回调函数有返回值的函数

组件销毁时就会执行返回的函数。

总结

情况结果
useEffect(()=>{})渲染完成时执行,任意状态改变时执行
useEffect(()=>{},[])渲染完成时执行
useEffect(()=>{},[state1])渲染时完成执行,state1改变时执行
useEffect(()=>{return function fun()})和上面一样,组件销毁时还会执行fun()