React中useEffect与生命周期钩子函数的对应关系

在React的函数组件中，useEffect的作用其实也对标了类组件中的生命周期，它的四种使用格式也与生命周期的四种钩子函数形成着对应关系。

使用格式一：不带参数的情况

执行时机：（1）初始执行（2）每次页面更新之后都要执行

    useEffect( () => {//执行函数})

对应关系：componentDidMount + componentDidUpdate

使用格式二：带第二个参数，参数为空数组

执行时机：只执行第一次（初始执行）

    useEffect( () => {//执行函数}, [] )

对应关系：componentDidMount

使用场景：事件绑定、发起ajax请求

使用格式三：带第二个参数，并且指定了依赖项

执行时机：只执行第一次（初始执行）

    useEffect( () => {//执行函数}, [] )

对应关系：componentDidMount

使用场景：事件绑定、发起ajax请求

使用格式四：依赖项为空,没有具体的副作用函数.但是有副作用函数的清理函数.

执行时机：组件销毁时

    useEffect( () => {return () => { 清理函数 }}, [] )

对应关系：componentWillUnMount

使用场景：组件销毁时,清除遗留的事件绑定和定时器.

React中useEffect与生命周期钩子函数的对应关系相关推荐

请列举出3个Vue中常用的生命周期钩子函数?
created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见 mounted ...
React 生命周期钩子函数
React15 挂载过程 // 完成了React数据的初始化. props.state constructor() // 组件已经完成初始化数据,但是还未渲染DOM时执行的逻辑 componentWi ...
uni-app中的生命周期钩子函数
1.应用级(App)生命周期钩子函数--App.vue -- 类似于小程序 onLaunch:应用启动了,每次运行只能执行一次 onShow:应用再次显示出来,每次显示出来都会调用 onHide:应用 ...
详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
不来看看这些 VUE 的生命周期钩子函数？ | 原力计划
作者 | huangfuyk 责编 | 王晓曼出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序生命周期钩子函数父组件与子组件执行顺序生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
Vue3 生命周期钩子函数
一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method onBeforeMount() : 组 ...
vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
mounted钩子函数_vue生命周期钩子函数的正确使用方式
先上图 vue的生命周期遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ 但是在前几天却遭遇了一个意外,我在mounted中获取后 ...