1.介绍
（1）作用：useEffect的作用是“勾住”函数组件中某些生命周期函数。
（2）都能勾住哪些声明周期函数
① componentDidMount(组件被挂载完成后)
②componentDidUpdate(组件重新渲染完成后)
③componentWillUnmount(组件即将被卸载前)
（3）为什么是这3个生命周期函数？
因为修改数据我们可以使用前面学到的useState，数据变更会触发组件重新渲染，上面3个就是和组件渲染关联最紧密的生命周期函数。
（4）useEffect是来解决类组件什么问题的？
useEffect是来解决类组件 某些执行代码被分散在不同的生命周期函数中 的问题。
2.useEffect基本用法
（1）useEffect(effect,[deps])函数可以传入2个参数，第1个参数为我们定义的执行函数、第2个参数是依赖关系(可选参数)。若一个函数组件中定义了多个useEffect，那 么他们实际执行顺序是按照在代码中定义的先后顺序来执行的。
具体说明如下：
第1个值effect是一个function，用来编写useEffect对应的执行代码。
componentDidMount、componentDidUpdate、componentWillUnmount ，当上述3个生命周期函数执行后，就会触发useEffect函数，进而执行而第1个参数 effect 中的 内容。
（2）代码形式
useEffect(() => {
//此处编写 组件挂载之后和组件重新渲染之后执行的代码
...
//如果不需要在组件卸载前执行任何代码，那么可以忽略不写effect中的return相关代码
return () => {
//此处编写 组件即将被卸载前执行的代码
...
}
},[deps])
①effect 函数主体内容中的代码，就是组件挂载之后和组件重新渲染之后你需要执行的代码；
②effect 函数 return 出去的返回函数主体内容中的代码，就是组件即将被卸载前你需要执行的代码；
③第2个参数 [deps]，为可选参数，若有值则向React表明该useEffect是依赖哪些变量发生改变而触发的；
'[deps]'补充说明：
①若缺省，则组件挂载、组件重新渲染、组件即将被卸载前，每一次都会触发该useEffect；
②若传值，则必须为数组，数组的内容是函数组件中通过useState自定义的变量或者是父组件传值过来的props中的变量，告诉React只有数组内的变量发生变化时才会触发useEffect；
③若传值，但是传的是空数组 []，则表示该useEffect里的内容仅会在“挂载完成后和组件即将被卸载前”执行一次；
3. useEffect使用
（1）如果某类组件中有变量a,默认值为0，当组件第一次被挂载或组件重新渲染后，改变a的值
import React, { useState,useEffect} from 'react';
function Component() {
const [a, setA] = useState(0);//定义变量a，并且默认值为0
useEffect(() => {
//无论是第一次挂载还是以后每次组件更新，修改网页标题的执行代码只需要在这里写一次即可
document.title = `${a} - ${Math.floor(Math.random()*100)}`;
})
const clickAbtHandler = (eve) =>{
setA(a+1);
}
return <div>
{a}
<button onClick={clickAbtHandler}>a+1</button>
</div>
}
export default Component;
如果使用类组件中，需要在 componentDidMount、componentDidUpdate中写两次相同的代码，但是使用useEffect只需要写一次
4.useEffect进阶高级使用
（1）组件需求： 若某类组件中有变量a，默认值为0，当组件第一次被挂载后或组件重新渲染后，将网页标题显示为a的值。
当组件第一次被挂载后执行一个自动累加器 setInterval，每1秒 a 的值+1。为了防止内存泄露，我们在该组件即将被卸载前清除掉该累加器。
需求分析：
关于自动累加器的操作，只关联 “组件挂载后和组件卸载前” 这2个生命周期函数中，那useEffect还包含了每次组件重新渲染后，这该怎么办？
useEffect函数的第2个参数表示该依赖关系，**将useEffect的第2个参数，设置为空数组 []**，即表示告诉React，这个useEffect不依赖任何变量的更新所引发的 组件重 新渲染，以后此组件再更新也不需要调用此useEffect。
这样就可以实现只在第一次挂载后和卸载前调用此useEffect的目的。
import React, { useState,useEffect} from 'react';
export default function Component4() {
const [a, setA] = useState(0);//定义变量a，并且默认值为0
//定义第1个useEffect，专门用来处理自动累加器
useEffect(() => {
// let timer = setInterval(() => {setA(a+1)},1000);// <-- 请注意这行代码，暗藏玄机
let timer = setInterval(() => { setA(a=>a+1)},1000)
return () => {
clearInterval(timer);
}
}, []);//此处第2个参数为[]，告知React以后该组件任何更新引发的重新渲染都与此useEffect无关
//定义第2个useEffect，专门用来处理网页标题更新
useEffect(() => {
document.title = `${a} - ${Math.floor(Math.random()*100)}`;
},[a])
return <div> {a} </div>
}