当前位置:首页 > 日记 > 正文

React组件生命周期详解

React组件生命周期详解

调用流程可以参看上图。

React组件提供了生命周期的钩子函数去响应组件不同时刻的状态,组件的生命周期如下:

  1. 实例化
  2. 存在期
  3. 销毁期

实例化

首次调用组件时,有以下方法会被调用(注意顺序,从上到下先后执行):

getDefaultProps

这个方法是用来设置组件默认的props,组件生命周期只会调用一次。但是只适合react.createClass直接创建的组件,使用ES6/ES7创建的这个方法不可使用,ES6/ES7可以使用下面方式:

//es7class Component { static defaultProps = {}}//或者也可以在外面定义es6//Compnent.defaultProps

getInitialState

设置state初始值,在这个方法中你已经可以访问到this.props。getDefaultProps只适合React.createClass使用。使用ES6初始化state方法如下:

class Component extends React.Component{ constructor(){ this.state = {  render: true, } }

componentWillMount

改方法会在组件首次渲染之前调用,这个是在render方法调用前可修改state的最后一次机会。这个方法很少用到。

render

这个方法以后大家都应该会很熟悉,JSX通过这里,解析成对应的虚拟DOM,渲染成最终效果。格式大致如下:

class Component extends React.Component{ render(){ return (  <div></div> ) }

componentDidMount

这个方法在首次真实的DOM渲染后调用(仅此一次)当我们需要访问真实的DOM时,这个方法就经常用到。如何访问真实的DOM这里就不想说了。当我们需要请求外部接口数据,一般都在这里处理。

存在期

实例化后,当props或者state发生变化时,下面方法依次被调用:

componentWillReceiveProps

每当我们通过父组件更新子组件props时(这个也是唯一途径),这个方法就会被调用。

componentWillReceiveProps(nextProps){}

shouldComponentUpdate

字面意思,是否应该更新组件,默认返回true。当返回false时,后期函数就不会调用,组件不会在次渲染。

shouldComponentUpdate(nextProps,nextState){}

componentWillUpdate

字面意思组件将会更新,props和state改变后必调用。

render

跟实例化时的render一样,不多说

componentDidUpdate

这个方法在更新真实的DOM成功后调用,当我们需要访问真实的DOM时,这个方法就也经常用到。

销毁期

销毁阶段,只有一个函数被调用:

componentWillUnmount

每当组件使用完成,这个组件就必须从DOM中销毁,此时该方法就会被调用。当我们在组件中使用了setInterval,那我们就需要在这个方法中调用clearTimeout。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

怎么批量替换ppt的背景批量替换ppt

怎么批量替换ppt的背景批量替换ppt

批量替换,步骤,方法,替换,背景,  我们经常会遇到想要将整篇ppt都换成其他背景的情况,对ppt不熟悉的话,如果你是一页一页替换,遇到页数多的内容就太花时间了。如何批量替换ppt的背景呢?下面小来告诉你吧。▼▼▼了解更多PPT的操作技巧,欢迎点…

解决JS内存泄露之js对象和dom对象

解决JS内存泄露之js对象和dom对象

对象,内存泄露,引用,电脑软件,JS,该问题涉及到作用域链,js对象和dom对象互相引用的问题。 因为对于匿名函数而言,其作用域链包含三个对象:匿名函数的变量对象、doTry()的变量对象和全局变量对象。此时doTry函数对象中btn变量引用了dom…

React如何将组件渲染到指定DOM节点

React如何将组件渲染到指定DOM节点

节点,组件,如何将,详解,电脑软件,前言众所周知React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构,如同一个简单的函数,就可以得到一个可以复用的react组件。但是有时候还是会有些限制的,尤其是他的API中,不能控制组件…

javascript实现table单元格点击展

javascript实现table单元格点击展

实例代码,单元格,效果,电脑软件,javascript,如果table元素的高如果不设置,是根据内容撑开的,根据这个规则,可以用js控制默认状态下table-cell的宽度,并将这一列的table-cell设置为dispaly:block,这样多出来的内容就会被隐藏掉,添加点击事件,把table…

JavaScript之DOM_动力节点Java学院

JavaScript之DOM_动力节点Java学院

学院,节点,动力,电脑软件,JavaScript,由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:更新:更新该DOM节点的内容,相当于更新了…

Yii2.0中使用js异步删除示例

Yii2.0中使用js异步删除示例

删除,异步,示例,电脑软件,js,整理文档,搜刮出一个Yii2.0中使用js异步删除示例,稍微整理精简一下做下分享。控制器:public function actionWeixinnotificationdel(){ $model = WxDistributorNotification::findOne($_GET['id']); if ($model)…

Excel中2010进行自动填充数据的操

Excel中2010进行自动填充数据的操

自动填充,数据,操作技巧,操作步骤,电脑软件,  序列填充是Excel中提供的最常用的快速输入技术之一。在Excel中可以通过以下途径进行数据的自动填充。今天,小编就教大家在Excel中2010进行自动填充数据的操作技巧。Excel中2010进行自动填充数…

JS实现页面打印功能

JS实现页面打印功能

页面,功能,电脑软件,JS,打印整个页面示例1.可直接在按钮添加调用打印方法:<input type='button' value='打印整页' onclick='javascript:window.print();' />示例2.也可调用JS方法<html><head><script type="text/javascript">funct…

ES6解构赋值实例详解

ES6解构赋值实例详解

赋值,详解,实例,电脑软件,本文实例讲述了ES6解构赋值。分享给大家供大家参考,具体如下:基本用法let [x, y, ...z] = ['a']//"a", undefined, []1.等号右边如果不是数组,将会报错(不是可遍历结构)2.解构赋值 var, let, const命令声明均适用3.…

关于vue.js发布后路径引用的问题解

关于vue.js发布后路径引用的问题解

引用,路径,电脑软件,vue,js,本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的但是一旦放在了…

import与export在node.js中的使用

import与export在node.js中的使用

详解,电脑软件,export,import,js,简述import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码。(关于node.js模块,可参考其他node.js模块化的文章)export 曝露使用export可以曝露出方…

ppt2010电脑版怎么安装动画大师

ppt2010电脑版怎么安装动画大师

动画,安装,步骤,大师,电脑软件,  为了方便我们在ppt中对动画的制作,我们可以在ppt中安装动画大师,那么,你知道怎样在ppt中安装动画大师吗?下面就让小编告诉你 如何在ppt中安装动画大师的方法,希望看完本教程的朋友都能学会并运用起来。在ppt…