1.为什么要使用useEffect
想必大家都是用过vue吧，在vue框架所写的项目中，我们通过在与后端进行数据交互的过程中，通常都是会在生命周期中进行数据的请求，然后将数据返回给页面进行渲染。在React中我们也是这样。但是在函数式组件中由于函数式组件中没有this，也没有对应的生命周期函数。因此我们需要使用useEffect来实现生命周期函数所具有的功能，
2.useEffect的用法
其实useEffect函数我们需要传递参数。其中第一个参数时一个函数，第二个参数时一个数组其中大概的用法如下。
3.useEffect的第一种用发，什么都不写
我们可以这样写，就是第二个参数不传递。这样就是每次页面渲染的时候都会执行useEffect中的代码。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。如果我们在其中修改了状态，触发页面的更新，然后页面一更新，useEffect就需要执行内部的代码。内部代码执行又要更新页面。从而陷入了死循环。代码如下
useEffect(()=>{
console.log(123123)
})
一旦我们在其中修改了state中的属性，或者换一局话我给我们执行的代码会触发页面的重新渲染，那么页面就会进行一个死循环，这是就需要依靠我们传递的第二个参数了。
useEffect(()=>{
console.log(123123)
setNumber(number+1)
})
4.useEffect的第二种用法，传递一个空数组
这样我们就只需要在页面挂载的时候以及页面卸载的时候才会执行代码。就不会在页面数据中修改的时候执行代码了。这是我们就可以在其中进行数据的访问，获取后端传递的数据。因为即使在其中修改了state，或者导致页面重新渲染了。也不会再触发该函数重新执行避免了死循环。但是我们又要在用户修改了数据后执行某些代码呢？因此我们可以在传递的数组中进行监听的依赖
useEffect(()=>{
console.log(props)
},[]) //仅在挂载和卸载的时候执行
5.useEffect的第三种用法，数组中传递依赖项
这样就只是在count中发生改变时才会执行该代码。并且我们也可以在一个函数式组件中写多个useEffect来完成我们不同的需求。
useEffect(()=>{
console.log(count)
},[count]) //count更新时执行
6.useEffect中的第四种用法，其返回函数中执行的就是我们代码卸载时执行的代码
可以帮助我们清理掉一些不用的组件或者函数变量。避免消耗相关内存。如可以使用unmount来进行组件的卸载
const timer = setInterval(() => {
setCount(count + 1)
}, 1000)
// useEffect方法的第一个参数是一个函数，函数可以return一个方法，这个方法就是在组件销毁的时候会被调用
useEffect(() => {
return () => {
clearInterval(timer)
}
}, [])
7.总结
使用了useEffect相比起我们直接使用生命周期时会简单的很多。因此官方其实也建议我们使用函数式组件。因此我们就需要使用hook来引入我们需要使用的东西，避免出现函数式组件无法使用类式组件的方法或者函数。也方便了我们的开发
