React组件生命周期介绍

举报
SHQ5785 发表于 2023/06/25 11:30:18 2023/06/25
【摘要】 一、前言在组件整个生命周期中,随着组件的props或者state发生改变,其DOM表现也会发生相应的变化。一个组件就是一个状态机,对于特定地输入,它总返回一致的输出。 二、生命周期图例一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。React应用中,组件加载顺序及生命周期如下图所示: 2.1 constructor( )constructor是ES6对类的默认方法,通过 ...

一、前言

在组件整个生命周期中,随着组件的props或者state发生改变,其DOM表现也会发生相应的变化。

一个组件就是一个状态机,对于特定地输入,它总返回一致的输出。

二、生命周期图例

一个React组件的生命周期分为三个部分:实例化、存在期和销毁时

React应用中,组件加载顺序及生命周期如下图所示:
在这里插入图片描述

2.1 constructor( )

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

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

constructor 常用来初始化state

class MyClass extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            list: this.props.List
        };
    }
}

2.2 componentWillMount()

在组件挂载之前调用且全局只调用一次。如果在这个钩子里可以setStaterender后可以看到更新后的state,不会触发重复渲染。该生命周期可以发起异步请求,并setState。(React v16.3后废弃该生命周期,可以在constructor中完成设置state

2.3 render()

render是一个React组件必须定义的生命周期,用来渲染dom。⚠️不要在render里面修改state,会触发死循环导致栈溢出render必须返回reactDom

render() {
	const {nodeResultData: {res} = {}} = this.props;
	if (isEmpty(res)) return noDataInfo;
	const nodeResult = this.getNodeResult(res);
	return (
		<div className="workspace-dialog-result">
			{nodeResult}
		</div>
	);

2.4 componentDidMount()

在组件挂载完成后调用,且全局只调用一次。可以在这里使用refs,获取真实dom元素。该钩子内也可以发起异步请求,并在异步请求中可以进行setState

componentDidMount() {
	axios.get('/auth/getTemplate').then(res => {
		const {TemplateList = []} = res;
		this.setState({TemplateList});
	});
}

2.5 componentWillReceiveProps (nextProps )

props发生变化以及父组件重新渲染时都会触发该生命周期,在该钩子内可以通过参数nextProps获取变化后的props参数,通过this.props访问之前的props。该生命周期内可以进行setState。(React v16.3后废弃该生命周期,可以用新的周期 static getDerivedStateFromProps 代替)

2.6 shouldComponentUpdate(nextProps, nextState)

用于判断是否重新渲染,组件挂载之后,每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,需要重新render。返回false则不触发渲染。在比较复杂的应用里,有一些数据的改变并不影响界面展示,可以在这里做判断,优化渲染效率。

2.7 componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用forceUpdate之后,componentWillUpdate会被调用。不能在该钩子中setState,会触发重复循环。(React v16.3后废弃该生命周期,可以用新的周期 getSnapshotBeforeUpdate)

2.8 componentDidUpdate()

完成组件渲染,除了首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate。该钩子内setState有可能会触发重复渲染,需要自行判断,否则会进入死循环。

componentDidUpdate() {
    if(condition) {
        this.setState({..}) // 设置state
    } else {
        // 不再设置state
    }
}

2.9 componentWillUnmount()

组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。

三、Demo

/* 父组件 */
import React, { Component } from 'react';
import Header from './components/Header'
import Footer from './components/Footer'
import BodyIndex from './components/BodyIndex'
 
class App extends Component {
  componentWillMount() {
    console.log('App-页面即将加载')
  }
 
  componentDidMount() {
    console.log('App-页面加载完成')
  }
  render() {
    return (
      <div className="App">
        <Header />
        <BodyIndex />
        <Footer />
      </div>
    );
  }
}
 
export default App;

Header组件,Footer组件、BodyIndex组件同样是在componentWillMountcomponentDidMount生命周期里调用console.log(),控制台打印信息如下:

/* console.log()内容和顺序如下 */
App-页面即将加载
Header-页面即将加载
body-页面即将加载
Footer-页面即将加载
Header-页面加载完成
body-页面加载完成
Footer-页面加载完成
App-页面加载完成

四、附:React生命周期官方解析

  • componentWillMount 在渲染前调用,在客户端也在服务端。

  • componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

  • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。

  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  • componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

五、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。