2.聊一聊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 <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>
   }

posted @ 2023-02-06 09:32 Domefy 阅读(612) 评论(0) 编辑收藏举报

刷新页面返回顶部

Domefy

2.聊一聊useEffect，什么时候使用,能传几个参数

公告