ES6中的React生命周期详解

最新推荐文章于 2025-06-13 15:06:56 发布

重名8080

最新推荐文章于 2025-06-13 15:06:56 发布

阅读量122

点赞数

文章标签： react java vue js javascript

本文链接：https://blog.youkuaiyun.com/weixin_55560445/article/details/114419980

版权

本文详细介绍了React组件的生命周期，包括初始化阶段、运行中阶段和销毁阶段。解析了各个阶段的重要钩子函数及其应用场景，如componentWillMount、componentDidMount、componentWillReceiveProps等。

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

太长时间没写react了，有点生。重新捡起来练练手。

import React,{ Component } from 'react';

class Demo extends Component {
  constructor(props,context) {
      super(props,context)
      this.state = {
          //定义state
      }
  }
componentWillMount () {
}
componentDidMount () {
}
componentWillReceiveProps (nextProps) {
}
shouldComponentUpdate (nextProps,nextState) {
}
componentWillUpdate (nextProps,nextState) {
}
componentDidUpdate (prevProps,prevState) {
}
render () {
    return (
        <div></div>
    )
}
componentWillUnmount () {
}
}
export default Demo;

React生命周期主要包括三个阶段：初始化阶段、运行中阶段和销毁阶段，在React不同的生命周期里，会依次触发不同的钩子函数

一、初始化阶段

1、constructor()

constructor参数接受两个参数props,context。获取到父组件传下来的的props,context。如果你想在constructor构造函数内部(注意是内部哦，在组件其他地方是可以直接接收的)使用props或context,则需要传入，并传入super对象。

constructor(props,context) {
  super(props,context)
  console.log(this.props,this.context) // 在内部可以使用props和context
}

也可以单独传一个，都不需要就不用传。

关于ES6的class constructor和super

只要组件存在constructor,就必需要写super,否则this指向会错误

constructor() {
  console.log(this) // 会报错，this指向错误
}

2、componentWillMount() 组件将要挂载

组件即将被渲染到页面之前触发，此时可以进行开启定时器、向服务器发送请求等操作

但是这里有一个问题

ajax请求能写在willmount里吗？
：答案是不推荐，别这么写

1.虽然有些情况下并不会出错，但是如果ajax请求过来的数据是空，那么会影响页面的渲染，可能看到的就是空白。
2.不利于服务端渲染，在同构的情况下，生命周期会到componentwillmount，这样使用ajax就会出错

3、render()

组件渲染

4、componentDidMount() 组件渲染完成

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

二、运行中阶段

5、componentWillReceiveProps (nextProps)

组件接收到属性时触发

在接受父组件改变后的props需要重新渲染组件时用到的比较多

6、 shouldComponentUpdate()

当组件接收到新属性，或者组件的状态发生改变时触发。组件首次渲染时并不会触发

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。

一般我们通过该函数来优化性能：

一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染

无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能

例如React中的就提供了一个PureComponent的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组