1、生命周期的概念

1.1、概念

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

10多年专注成都网站制作，企业网站设计，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于企业网站设计,高端网页制作,对咖啡厅设计等多个领域，拥有丰富的网站建设经验。

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

1. 加载阶段（Mounting）：在组件初始化时执行，有一个显著的特点：创建阶段生命周期函数在组件的一辈子中只执行一次；

2. 更新阶段（Updating）：属性和状态改变时执行，根据组件的state和props的改变，有选择性的触发0次或多次；

3. 卸载阶段（Unmounting）：在组件对象销毁时执行，一辈子只执行一次；

2、旧的生命周期

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 (
       
Old React.Component
     )
   }
   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)

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

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 (
       
New React.Component
     )
   }
   componentDidMount() { // 挂载后

   }  
   shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
     return true
   }
   getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发

   }
   componentDidUpdate() { // 组件更新后触发

   }
   componentWillUnmount() { // 组件卸载时触发

   }
}

4、总结

旧的生命周期

新的生命周期

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：组件的生命周期是什么？-创新互联
本文URL：http://myzitong.com/article/ejsde.html