react生命周期方法

每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特定环节之后被调用。

react生命周期可分为三个状态以及对应的方法

Mounting(装配)

  • constructor()

    React组件的构造函数将会在装配之前被调用。

  • componentWillMount()

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

  • render()

    所有组件类都必须有自己的 render 方法,用于输出组件。

  • componentDidMount()

    在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。

Updating(更新)

  • componenWillReceiveProps()

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

  • shouldComponentUpdate()

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

  • componentWillUpdate()

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

  • render()

    同上

  • componentDidUpdate()

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

Unmounting(卸载)

  • componentDidUnmount()

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

想了解更多请参考官方中文文档关于生命周期的详解

原文地址:https://www.cnblogs.com/hutaoblog/p/8436621.html

时间: 2024-12-08 12:22:55

react生命周期方法的相关文章

react篇章-React State(状态)-将生命周期方法添加到类中

将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. 同样,每当 Clock 生成的这个 DOM 被移除的时候,我们也会想要清除定时器,这在 React 中被称为卸载. 我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码: <!DOCTYPE html> <html> <head> <meta cha

react生命周期

1.getDefaultProps 作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享. 2.getInitialState 作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props. 3.componentWillMount 在完成首次渲染之前调用,此时仍可以修改组件的state. 4.render 必选的方法,创建虚拟DOM,该方法具有特殊的规则: 只能通过this.props和this.state访问数据

react生命周期总结

当通过createClass创建了组件之后,该React组件就有了生命周期.通常一个React组件的生命周期可分为三个阶段: Mounting:挂载组件,也就是组件实例化 ReciveProps:存在期,在这个时期组件的props和state会变化,重新渲染组件 Unmounting:卸载组件,也就是组件被销毁 React在生命周期中提供了10种API: 1.getDefaultProps():作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享. 2.getI

vue与 react 生命周期

Vue vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render

前端005/React生命周期

ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生命周期函数 (一).初始化阶段 1.设置组件的默认属性 static defaultProps = { name: 'sls', age:23 }; //or Counter.defaltProps={name:'sls'} 复制代码 2.设置组件的初始化状态 constructor() { sup

vue生命周期和react生命周期对比

一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></

react生命周期知识点

react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.render5.componentDidMount 当组件在服务端被实例化,首次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.r

React生命周期以及关于17.0版本生命周期的改变

React的生命周期: constuctor: 1.组件的初始化,用来定义当前组件所需要的一些状态,状态定义在this.state中. 2.当前生命周期中必须书写super,否则this的指向会发生错误以及报错 3.在当前生命周期中默认是访问不到props属性的,如果想要进行访问必须在super以及constructor中添加参数props componentWillMount: 挂载前: 1.可以进行前后端数据的请求(在服务端渲染的时候) 2.可以在数据第一次被渲染的时候做数据的更改 3.在当

10秒钟理解react生命周期

慎点!这是一篇很水很水的文章, 抄自react中文文档, 本文详细介绍了react生命周期函数执行顺序, 以及各生命周期函数的含义和具体作用. 不同阶段生命周期函数执行顺序 挂载(Mounting) 挂载指的是组件被实例化并插入到dom中 顺序如下: constructor -> getDerivedStateFromProps -> render -> componentDidMount 更新(Updating) 当state变化或者props变化会引起更新 顺序如下: getDeri