Hook钩子函数--useEffect
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
{a}
}
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
{a}
}