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

目录

什么是生命周期

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后调用,可以执行副作用操作,如发送网络请求、订阅事件等。

2. Updating(更新)阶段:组件的状态或属性发生变化时重新渲染。
   - componentDidUpdate:组件更新后调用,可以进行一些更新后的操作,比如处理更新后的数据、重新渲染等。

3. Unmounting(卸载)阶段:组件从DOM中移除。
   - componentWillUnmount:组件即将被卸载和销毁时调用,可以执行一些清理操作,比如取消订阅、清除定时器等。

在React 16.3版本之后,还引入了新的生命周期方法,包括:
- static getDerivedStateFromProps: 在组件实例化或接收到新的props时调用,返回一个新的state,用于在props发生变化时更新state。
- getSnapshotBeforeUpdate: 在更新前获取DOM的快照,用于在DOM更新后获取一些额外的信息。

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

旧生命周期

生命周期图示

react当中生命周期(旧生命周期详解)_第1张图片

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

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中创建的任何监听。主要是为了善后工作,比如关闭定时器,删除定义的对象

react当中生命周期(旧生命周期详解)_第2张图片

 

组件卸载方式: 

react当中生命周期(旧生命周期详解)_第3张图片

你可能感兴趣的:(react.js,前端,前端框架)