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

最新推荐文章于 2025-07-03 11:43:38 发布

原创

最新推荐文章于 2025-07-03 11:43:38 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文详细探讨了React组件的生命周期，包括初始化、更新和销毁三个阶段。通过案例分析，阐述了各阶段的关键方法，如getInitialState、componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentDidUpdate和componentWillUnmount。了解这些生命周期方法有助于更好地管理和控制React组件的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言

前言

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

react生命周期的四个阶段

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

案例说明

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

import React, {
   
    Component } from 'react'

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