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

老生常谈js-react组件生命周期

老生常谈js-react组件生命周期

组件的生命周期可分成三个状态:

?Mounting:已插入真实 DOM
?Updating:正在被重新渲染
?Unmounting:已移出真实 DOM

生命周期的方法有:

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

?componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

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

?shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在你确认不需要更新组件时使用。

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

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

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

(DVA)定义组件一般有三种方式:

// 1. 传统写法const App = React.createClass({});// 2. es6 的写法class App extends React.Component({});// 3. stateless 的写法(我们推荐的写法)const App = (props) => ({});

其中第1种是我们(DVA)不推荐的写法,第2种是在你的组件涉及 react 的生命周期方法的时候采用这种写法,而第3种则是我们一般推荐的写法。

以上这篇老生常谈js-react组件生命周期就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

老生常谈js中0到底是 true 还是 fa

老生常谈js中0到底是 true 还是 fa

老生常谈,电脑软件,true,js,false,想到一个好玩的,运行如下 javascript :if ('0') alert("'0' is true");if ('0' == false) alert("'0' is false");结果是,两次都 alert 了!那么 '0' 到底是 true 还是 false 呢?答案是:在js做比较…

Excel表格函数出错怎么解决

Excel表格函数出错怎么解决

函数,表格,电脑软件,Excel,  工作中经常使用Excel的朋友可能都会遇到一些看起来似懂非懂的错误值信息:例如# N/A!、#VALUE!、#DIV/O!等等,出现这些错误的原因有很多种,你真的了解它们吗,熟练掌握解决这些错误的方法吗?下面给大家分享Excel中…

ps怎么给图形上渐变色

ps怎么给图形上渐变色

图形,渐变色,方法,电脑软件,ps,  给图形上色在ps中很简单,但其实上渐变色也很好看。那么大家知道ps怎么给图形上渐变色吗?下面是小编整理的ps怎么给图形上渐变色的方法,希望能帮到大家!ps给图形上渐变色的方法1、新建一个图层,画一个圆形。2…

解决浏览器记住ajax请求并能前进和

解决浏览器记住ajax请求并能前进和

请求,浏览器,并能,电脑软件,ajax,在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这都有一个共同点,就是 浏览器地址栏的地址改变了。浏览器自身维护了一个记录用户访问页面历史的栈,栈中记录了用户…

WPS演示插入背景音乐的方法是什么

WPS演示插入背景音乐的方法是什么

方法,背景音乐,演示,电脑软件,WPS,  制作PPT的时候,需要加入一些元素使得PPT更加吸引人,其中给PPT加入背景音乐是常用的方法之一。那么在wps中,这个方法应该怎么使用,一起来探讨一下。以下是小编为您带来的关于WPS演示插入背景音乐的方法,希望…

JavaScript定义函数的三种实现方法

JavaScript定义函数的三种实现方法

方法,函数,三种,定义,电脑软件,JavaScript定义函数的三种实现方法【1】正常方法function print(msg){ document.write(msg);}对函数进行调用的几种方式: 函数名(传递给函数的参数1,传递给函数的参数2,….)变量 = 函数名(传递给函数的参数1,传递给…

详解JS中的立即执行函数

详解JS中的立即执行函数

立即执行函数,详解,电脑软件,JS,1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误function(){alert(dada);}VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,这个函数形…

JS倒计时实例_天时分秒

JS倒计时实例_天时分秒

分秒,天时,倒计时,实例,电脑软件,HTML代码:<div id="times_wrap" class="time_num"> 距离结束时间: <div class="time_w"> <b id="times_d" class="time"> </b>天 <b id="times_h" class="time"> </b>时 <b id="times_m" …

Word中进行设置半透明的操作方法

Word中进行设置半透明的操作方法

设置,半透明,操作方法,操作步骤,电脑软件,  在我们使用word的时候经常会往里面插入一些图片,在word中,我们还可以将图片的背景颜色更改为半透明色,还可以做些其他的改动。今天,小编就教大家在Word中进行设置半透明的操作方法。Word中进行设置…

photoshop cs6怎么替换颜色 photos

photoshop cs6怎么替换颜色 photos

替换,教程,颜色,植物,电脑软件,如果发现自己的照片颜色不理想,想要替换颜色怎么办?其实我们可以使用ps任意替换颜色。那么,如何使用photoshop cs6替换颜色呢?下面小编就给大家介绍photoshop cs6给植物图片替换颜色的方法,一起去看看吧!方法/步骤:1…

js绑定事件和解绑事件

js绑定事件和解绑事件

事件,绑定事件,电脑软件,js,在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性attachEvent方法 只支持IE678,不兼容其他浏览器addEventListener方法 兼容火狐谷歌,不兼容IE8及以下addEvent…

ps怎么制作冲击波效果的?

ps怎么制作冲击波效果的?

冲击波,效果,电脑软件,ps,利用Photoshop制作冲击波效果其实主要应用了滤镜的各种功能,现在就把制作的步骤和截图分享给大家,希望对你有所帮助,本经验仅供参考使用。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:201…