react当中生命周期(旧生命周期详解)

新生命周期https://blog.csdn.net/kkkys_kkk/article/details/135156102?spm=1001.2014.3001.5501

目录

什么是生命周期

react中的生命周期

旧生命周期

生命周期图示

常用的生命周期钩子函数

初始化阶段

挂载阶段

在严格模式下挂载阶段的生命周期函数会执行两次原因

更新阶段

componentWillPrceiveProps

shouldComponentUpdate

componentWillUpdate

render(同上)

componentDidUpdate

销毁阶段

componentWillUnmount()


什么是生命周期

生命周期(Lifecycle)指的是软件或程序在运行过程中经历的不同阶段和状态变化。在编程领域中,特别是在面向对象编程中,生命周期是指对象从创建到销毁的整个过程中所经历的状态变化。

生命周期通常由一系列的方法或事件组成,用于在对象的不同阶段执行相应的操作或处理。每个阶段可以对应于不同的状态,例如初始化、运行、暂停、恢复以及销毁等。

在前端Web开发中,生命周期常常用于描述JavaScript框架或库中的组件或页面的状态变化。例如,在React框架中,组件有挂载、更新和卸载等不同的生命周期阶段,每个阶段都有相应的生命周期方法,如componentDidMount、componentDidUpdate和componentWillUnmount等。

通过生命周期方法,开发者可以在对象不同状态下执行相应的操作,比如初始化数据、处理用户输入、发送网络请求、更新UI等。这些方法允许开发者在适当的时候执行逻辑,并且处理应用程序的不同方面。

react中的生命周期

在React中,组件的生命周期指的是组件从创建、挂载、更新到销毁的整个过程中所经历的不同阶段和状态变化。通过控制这些生命周期方法的调用,可以在不同的阶段执行逻辑操作,如初始化数据、处理用户输入、发送网络请求、更新UI等。

React的组件生命周期可以分为以下三个阶段:

  1. Mounting(挂载)阶段:组件被创建并添加到DOM中。
  • constructor:组件的构造函数,在组件被创建时调用,一般用于初始化状态和绑定事件。

  • render:渲染组件的UI结构。

  • componentDidMount:组件被挂载到DOM后调用,可以执行副作用操作,如发送网络请求、订阅事件等。

  1. Updating(更新)阶段:组件的状态或属性发生变化时重新渲染。
  • componentDidUpdate:组件更新后调用,可以进行一些更新后的操作,比如处理更新后的数据、重新渲染等。
  1. Unmounting(卸载)阶段:组件从DOM中移除。
  • componentWillUnmount:组件即将被卸载和销毁时调用,可以执行一些清理操作,比如取消订阅、清除定时器等。

在React 16.3版本之后,还引入了新的生命周期方法,包括:

  • static getDerivedStateFromProps: 在组件实例化或接收到新的props时调用,返回一个新的state,用于在props发生变化时更新state。

  • getSnapshotBeforeUpdate: 在更新前获取DOM的快照,用于在DOM更新后获取一些额外的信息。

需要注意的是,在React 17版本中,一些生命周期方法已经被标记为过时,建议使用其他替代的方法来完成相应的操作。而且,React Hooks的引入也改变了组件的开发方式,提供了更简洁的方式操作组件的状态和生命周期。

旧生命周期

生命周期图示
常用的生命周期钩子函数
初始化阶段

constructor:创建组件时最先执行;

通过给 this.state 赋值对象来初始化内部的state;为事件处理程序绑定this

如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数

挂载阶段

挂载阶段会触发 componentWillMount、 render 和 componentDidMount
componentWillMount:数据可以获取到,但是真实DOM没有获取到,它相当于是Vue生命周期中 created + beforeMount

render:每次组件渲染都会触发,渲染视图(注意,不能调用setState())

componentDidMount:组件挂载(完成DOM渲染)后,用于发送网络请求;DOM操作

在严格模式下挂载阶段的生命周期函数会执行两次原因

官网的解释是: React 工作分为两个阶段,渲染和提交阶段。渲染的过程可能会很慢,提交会很快。为了避免浏览器的阻塞,React 会把渲染工作分解为多个部分执行。这就导致了React 在提交之前会多次调用渲染阶段生命周期的方法,或者在不提交的情况下调用它们。为的就是消除副作用。但在生产环境下不会产生此问题

更新阶段

props更新

componentWillPrceiveProps

接收新属性;能够监听到当前组件身上的 props 变化 nextProps参数可以获取到最新的属性

shouldComponentUpdate

触发时机:组件重新渲染前执行
根据 shoundComponentUpdate 的返回值来决定是否更新自身组件及其子组件。返回 true 更
新,返回 false 不更新
此方法仅作为性能优化的方案 而存在,不要企图依靠此方法来 " 阻止 " 渲染
最好使用 React 提供的内置组件 PureComponent 来自动判断是否调用 render 方法,而不是使用 shoundComponentUpdate 方法进行手动判断
不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify() ,这样做会影响性能
shoundComponentUpdate( nextProps , nextState )接收两个值
nextProps:更新完成后的 props 值
nextState:更新完成后的 state 值

componentWillUpdate

组件即将更新

作用: 获取的是更新前的数据,为组件的更新做准备工作,生成新的VDOM

注意:这个钩子函数中切记不要使用 this.setState,会造成死循环

render(同上)
componentDidUpdate

在组件更新(完成 DOM渲染)后触发

  1. 发送网络请求; 2. DOM 操 作;
    注意:如果要 setState() 必须放 在一个if 条件中
    state更新
    (同上)
  • shouldComponentUpdate

  • componentWillUpdate

  • render

  • componentDidUpdate

销毁阶段
componentWillUnmount()

作用: 在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理,例如使定时器无效,取消网络请求或清理在componentDidMount中创建的任何监听。主要是为了善后工作,比如关闭定时器,删除定义的对象

组件卸载方式:

相关推荐
艾小逗37 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk5 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务