React使用useEffect模拟生命周期

落日映苍穹つ 2023-10-07 22:50 14阅读 0赞

## 一、useEffect是什么？ ##

副作用钩子：用于处理组件中的副作用，用来取代生命周期函数。

useEffect(()=>{//副作用函数
        return ()=>{ // 返回函数
    
        }
    },[依赖参数])

## 二、useEffect可以做什么？ ##

*  挂载阶段：  
    从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件挂载完成之后，将队列（链表）中的副作用函数执行，并将副作用函数的返还函数，推入一个新的队列（链表）
 *  更新阶段 - !!! 更新阶段不同于其他阶段对应的函数是否要执行，取决于依赖参数：  
    从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件更新完成之后，找出之前的返回函数队列，依次准备执行，在执行前会判断该 useEffect 的依赖参数，如果依赖参数改变就执行，否则跳过当前项去看下一项，然后再执行副作用队列，执行时同样判断依赖是否变化，来决定其是否执行，如果执行，就重新获取其对应的返回函数。
 *  卸载阶段：  
    组件即将卸载时，找出其对应的返回函数队列，依次执行

## 三、常规处理副作用的几种情况： ##

依赖参数不同时有不同的效果：  
**1、为空**： 组件的任何更新，该 useEffect 对应的返回函数和函数都执行

useEffect(()=>{//副作用函数
        return ()=>{ // 返回函数
    
        }
    })

**2、为空数组**: 不监听组件的更新

useEffect(()=>{//副作用函数
        return ()=>{ // 返回函数
    
        }
    },[])

**3、数组中有具体依赖**：对应的依赖数据，有变化的时候，才会执行

useEffect(()=>{//副作用函数
        return ()=>{ // 返回函数
    
        }
    },[state])

## 1、组件挂载完之后做某事 ##

useEffect(()=>{
        console.log("组件挂载完之后执行");
        return ()=>{
    
        }
      },[]);

### 2、组件挂载完成及更新完成做某事 ###

useEffect(()=>{
        console.log("组件挂载完成之后及更新完成之后执行");
    })

## 3、组件更新完做某事 ##

const isMounted = useRef(false);
    useEffect(()=>{
        if(isMounted.current){
            console.log("组件更新完成")
        } else {
          isMounted.current = true;
        }
    })

### 4、组件即将卸载做某事 ###

useEffect(()=>{
        return ()=>{
          console.log("组件即将卸载时执行");
        }
    },[]);

参考：

[useEffect使用 - 简书][useEffect_ -]

[useEffect_ -]: https://www.jianshu.com/p/af2455d4173f

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 React使用useEffect模拟生命周期

一、useEffect是什么？副作用钩子：用于处理组件中的副作用，用来取代生命周期函数。 useEffect(()=>{//副作用函数 ret

落日映苍穹つ/ 2023年10月07日 22:50/ 0 赞/ 15 阅读

相关 REACT_react生命周期

componentWillMount() { console.log('组件将要挂载'); }; componentDidMount()

本是古典何须时尚/ 2023年03月01日 09:37/ 0 赞/ 33 阅读

相关 React 生命周期

目录 React 生命周期图一、生命周期路径一，初始化组件过程 1、getDefaultProps 2、getInitialState 3、componentWil

刺骨的言语ヽ痛彻心扉/ 2022年10月02日 06:52/ 0 赞/ 248 阅读

相关 React生命周期

React生命周期钩子函数执行顺序 constructor => render =>componentDidMount ![在这里插入图片描述][watermark

骑猪看日落/ 2022年09月06日 01:40/ 0 赞/ 292 阅读

相关 React生命周期

转载：[React数据获取为什么一定要在componentDidMount里面调用？][React_componentDidMount] https://segment

拼搏现实的明天。/ 2022年05月21日 02:30/ 0 赞/ 310 阅读

相关 react 生命周期

Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 ![588767-20161205190022429-1074951616.jpg

Dear 丶/ 2022年05月11日 03:44/ 0 赞/ 356 阅读

相关 react生命周期

前言学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始

傷城~/ 2022年05月08日 12:08/ 0 赞/ 328 阅读

相关 React生命周期

![1536650259710157.png][] 以上图片来自百度图库 componentWillMount 在渲染前调用,在客户端也在服务端。 compon

绝地灬酷狼/ 2022年03月09日 14:28/ 0 赞/ 322 阅读

相关 react生命周期

react生命周期，一直只关心自己常用的那几个，虽然基本能解决99%的问题，但是当被问到的时候，说的不清不楚还是让我很惭愧，所以今天我就专门来梳理一下react的生命周期 1

- 日理万妓/ 2022年03月07日 10:10/ 0 赞/ 333 阅读

相关 React生命周期

1、17版之前的生命周期图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

逃离我推掉我的手/ 2021年09月18日 14:32/ 0 赞/ 534 阅读