关于React组件生命周期函数的详解

红太狼 2023-07-11 11:03 130阅读 0赞

## 1、生命周期的概念 ##

### 1.1、概念 ###

在组件创建、组件属性更新、组件被销毁的过程中，总是伴随着各种各样的函数执行，这些在组件特定时期，被触发执行的函数，统称为组件的生命周期函数。

### 1.2、组件生命周期三个阶段 ###

1.  **加载阶段（Mounting）：**在组件初始化时执行，有一个显著的特点：创建阶段生命周期函数在组件的一辈子中只执行一次；
2.  **更新阶段（Updating）：**属性和状态改变时执行，根据组件的state和props的改变，有选择性的触发0次或多次；
3.  **卸载阶段（Unmounting）：**在组件对象销毁时执行，一辈子只执行一次；

## 2、旧的生命周期 ##

![480452-20200304192602004-1059457791.png][]

### 2.1、Mounting（加载阶段：涉及6个钩子函数） ###

> **constructor()**

加载的时候调用一次，可以初始化state

> **getDefaultProps()**

设置默认的props，也可以用dufaultProps设置组件的默认属性。

> **getInitialState()**

初始化state，可以直接在constructor中定义this.state

> **componentWillMount()**

组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state

> **render()**

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

> **componentDidMount()**

组件渲染之后调用，只调用一次

### 2.2、Updating（更新阶段：涉及5个钩子函数) ###

> **componentWillReceivePorps(nextProps)**

组件加载时不调用，组件接受新的props时调用

> **shouldComponentUpdate(nextProps, nextState)**

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）

> **componentWillUpdata(nextProps, nextState)**

组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state

> **render()**

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

> **componentDidUpdate()**

组件加载时不调用，组件更新完成后调用

### 2.3、Unmounting（卸载阶段：涉及1个钩子函数） ###

> **componentWillUnmount()**

组件渲染之后调用，只调用一次

### 2.4、生命周期函数代码示例 ###

import React, { Component } from 'react' export default class OldReactComponent extends Component { constructor(props) { super(props) // getDefaultProps：接收初始props // getInitialState：初始化state } state = { } componentWillMount() { // 组件挂载前触发 } render() { return ( <h2>Old React.Component</h2> ) } componentDidMount() { // 组件挂载后触发 } componentWillReceivePorps(nextProps) { // 接收到新的props时触发 } shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新 return true } componentWillUpdate(nextProps, nextState) { // 组件更新前触发 } componentDidUpdate() { // 组件更新后触发 } componentWillUnmount() { // 组件卸载时触发 } }

## 3、新的生命周期 ##

### 3.1、Mounting（加载阶段：涉及4个钩子函数） ###

> **constructor()**

加载的时候调用一次，可以初始化state

> **static getDerivedStateFromProps(props, state)**

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

> **render()**

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

> **componentDidMount()**

组件渲染之后调用，只调用一次

### 3.2、Updating（更新阶段：涉及5个钩子函数) ###

> **static getDerivedStateFromProps(props, state)**

> **shouldComponentUpdate(nextProps, nextState)**

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）

> **render()**

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

> **getSnapshotBeforeUpdate(prevProps, prevState)**

触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

> **componentDidUpdate()**

组件加载时不调用，组件更新完成后调用

### 3.3、Unmounting（卸载阶段：涉及1个钩子函数） ###

> **componentWillUnmount()**

组件渲染之后调用，只调用一次

### 3.4、Error Handling(错误处理) ###

> **componentDidCatch(error，info)**

任何一处的javascript报错会触发

### 3.5、新生命周期函数代码示例 ###

import React, { Component } from 'react' export default class NewReactComponent extends Component { constructor(props) { super(props) // getDefaultProps：接收初始props // getInitialState：初始化state } state = { } static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state return state } componentDidCatch(error, info) { // 获取到javascript错误 } render() { return ( <h2>New React.Component</h2> ) } componentDidMount() { // 挂载后 } shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新 return true } getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发 } componentDidUpdate() { // 组件更新后触发 } componentWillUnmount() { // 组件卸载时触发 } }

## 4、总结 ##

旧的生命周期

![480452-20200304192755986-1895284301.jpg][]

新的生命周期

![480452-20200304192807474-1772879843.jpg][]

1.  React16新的生命周期弃用了`componentWillMount`、`componentWillReceivePorps`，`componentWillUpdate`；
2.  新增了`getDerivedStateFromProps`、`getSnapshotBeforeUpdate`来代替弃用的三个钩子函数（`componentWillMount`、`componentWillReceivePorps`，`componentWillUpdate`）；
3.  React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（`getDerivedStateFromProps`、`getSnapshotBeforeUpdate`）混用，`React17`将会删除`componentWillMount`、`componentWillReceivePorps`，`componentWillUpdate`；
4.  新增了对错误的处理（componentDidCatch）

[480452-20200304192602004-1059457791.png]: https://img2020.cnblogs.com/blog/480452/202003/480452-20200304192602004-1059457791.png
[480452-20200304192755986-1895284301.jpg]: https://img2020.cnblogs.com/blog/480452/202003/480452-20200304192755986-1895284301.jpg
[480452-20200304192807474-1772879843.jpg]: https://img2020.cnblogs.com/blog/480452/202003/480452-20200304192807474-1772879843.jpg