带你摸透react的生命周期（react生命周期详解，从创建到销毁的全过程）

带你摸透react的生命周期（react生命周期详解，从创建到销毁的全过程）

文章目录

• 前言
• • react生命周期的四个阶段
  • 案例说明
  • 总结
  • • 初始化
    • 更新
    • 销毁

前言

生命周期其实就是从创建到销毁的整个过程，我们发现很多框架都涉及到生命周期，为什么这些框架需要设计生命周期呢，是因为我们需要了解我们代码的执行过程。以及它们的执行顺序是怎样的，同时在不同的生命周期阶段会暴露不同的构造函数，而在不同的构造函数中我们可以做很多不同的功能。在React中一个由extends Component创建的类组件才会拥有生命周期

react生命周期的四个阶段

1. 组件初始化阶段：
   getInitialState：初始化 this.state 的值，只在组件装载之前调用一次
   getDefaultProps：只在组件创建时调用一次并缓存返回的对象（即在 ateClass 之后就会调用）。
   因为这个方法在实例初始化之前调用，所以在这个方法里面不能依赖 this 获取到这个组件的实例。
2. 组件加载阶段：
   componentWillMount：只会在装载之前调用一次
   componentDidMount：只会在装载完成之后调用一次
3. 组件更新阶段：
   componentWillReceiveProps 、shouldComponentUpdate、componentWillUpdate、componentDidUpdate这些方法不会在首次render组件的 周期调用。
4. 组件销毁阶段：
   componentWillUnmount：卸载组件触发

案例说明

对于上面的生命周期过程，下面来写一个案例感受一下：
关键点看代码中的注释：

import React, { Component } from 'react'export class Button extends Component {constructor(props) {super(props)this.state = { liked: false }// 我们要执行的第一个阶段就是初始化阶段up('%c 1-初始化阶段', 'color: red', props, this.state)}// 逐渐被淘汰,需要使用就要加UNSAFE_不加会出现警告,此生命周期DOM未渲染// 只会在挂载之前调用一次,在render之前调用,一般我们可以在这个阶段发起请求// 还可以在这里调用setState改变状态,并且不会导致额外调用一次renderUNSAFE_componentWillMount() {up('%c 2-组件加载前', 'color: green')}componentDidMount() {// 在这里请求也可以,此时DOM节点已经生成// 只在挂载完成之后调用一次,在render之后调用,从这里可以获取DOM节点up('%c 4-组件加载后', 'color: orange')}hanleClick(e) {this.setState({ liked: !this.state.liked })}shouldComponentUpdate() {up('%c 5-数据是否需要更新', 'color: #00ae9d')// return true代表组件需要更新,false表示不用更新,实际业务开发中我们一般不用这个// return falsereturn true}UNSAFE_componentWillUpdate(nextProps, nextState) {console.log(nextProps, up('%c 6-更新前', 'color: #885233')}componentDidUpdate(prevProps, prevState) {console.log(prevProps, up('%c 7-更新后'