React 生命周期函数执行顺序

最新推荐文章于 2024-03-06 12:17:05 发布

chen_晨风

最新推荐文章于 2024-03-06 12:17:05 发布

阅读量581

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq_37674616/article/details/84067112

版权

本文详细阐述了React组件在数据加载、数据更新和组件销毁时的生命周期方法执行顺序。在16.4版本后，getDerivedStateFromProps取代了componentWillMount，用于在组件接收到新属性时更新state。数据更新时，执行顺序包括shouldComponentUpdate、componentWillUpdate、render和componentDidUpdate，其中getSnapshotBeforeUpdate与componentDidUpdate配合使用。在错误处理中，getDerivedStateFromError和componentDidCatch起到了关键作用。

摘要由CSDN通过智能技术生成

一、数据加载时

二、数据更新时

三、组件销毁

一、数据加载时

~~constructor-->componentWilMount-->render-->componentDidMount~~

注:在版本16.4之后,废除了componentWillMount,则顺序如下:

constructor()-->static getDerivedStateFromProps()-->render()-->componentDidMount()

import React, { Component } from 'react'

export default class Lifecycle extends Component {
    constructor(props){
        super(props);
        console.log('01 构造函数');
    }
    //组件将要被挂载
    componentWillMount(){
        console.log('02 组件挂载前触发');
    }
    //组件挂载完成
    componentDidMount(){
        console.log('04 组件挂载完成');
    }
   
  render() {
      console.log('03 数据渲染');
    return (
      <div>
         <h2>React 声明周期函数</h2>
      </div>
    )