react生命周期

最新推荐文章于 2025-08-27 11:53:43 发布

原创最新推荐文章于 2025-08-27 11:53:43 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

文章目录

一、react生命周期介绍
二、使用方法

一、react生命周期介绍

react生命周期全过程：
在这里插入图片描述

二、使用方法

1.挂载期

constructor()构造方法
constructor是ES6对类的默认方法，通过 new命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。当存在constructor的时候必须手动调用super方法。在constructor中如果要访问this.props需要传入props

super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，功子组件读取(组件中props只读不可变，state可变)。
而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。

代码如下（示例）：

class Index extends React.component{
    constructor(props){
        super(props);            // 声明constructor时必须调用super方法
        console.log(this.props); // 可以正常访问this.props，因为传入的props
    }
}

getDerivedStateFromProps(props,state)
getDerivedStateFromProps会在调用render方法之前调用，并且在初始挂在以及后续更新时都会调用，它会返回一个对象来更新state，state的值取决于props
render()
当render被调用时，它会检测 this.props 和 this.state的变化，渲染一个虚拟dom
componentDidMount()
componentDidMount会在组件挂载后立即执行，此处是实例化请求的好地方，，你可以在componentDidMount()里直接调用setState(),它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前，既使在render()两次调用的情况下，用户也看不到中间状态，请谨慎使用，因为它会导致性能问题

2.更新期

getDerivedStateFromProps(props,state)
该方法是挂载期和更新期都会使用到的方法，解释同上
shouldComponentUpdate(nextProps,nextState)
在渲染之前执行，根据返回值来判断React组件是否受当前state和props更改的影响，state发生变化，默认返回true，组件就会重新渲染。首次渲染或使用forceUpdate()不会调用该方法
render()
该方法是挂载期和更新期都会使用到的方法，解释同上
getSnapshotBeforeUpdate(prevProps,prevState)
getSnapshotBeforeUpdate在最近一次渲染输出前执行，此生命周期的任何返回值将作为参数传给componentDidUpdate()。它不是很常见，可能出现在UI处理中
componentDidUpdate(prevProps,prevState,snapshot)
componentDidUpdate在更新后立即执行，首次渲染不会执行此方法，当组件更新后，可以在此处进行dom操作，当props发生变化时，也可以在此处进行网络请求。。你也可以在componentDidUpdate中直接调用setState(),但是必须包裹在条件语句里，否则会导致死循环