网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

组件的生命周期是什么?-创新互联

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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻标题:组件的生命周期是什么?-创新互联
分享链接:http://bjjierui.cn/article/ejsde.html

其他资讯