ReactJS入门3:组件的生命周期
本文主要介绍组件的生命周期。
组建的生命周期主要分为3个:Mounting、Updating、Unmounting.
1. Mounting:组件被加载到DOM
在本阶段,主要有三个方法:
1.1 getInitialState():object 设置初始状态
1.2 componentWillMount() Mounting发生前调用
1.3 componentDidMount() Mounting发生后调用。该方法主要用于请求DOM节点的初始化。
2.Updating:DOM更新,组件被重新渲染
在本阶段,主要有四个方法:
2.1 componentWillReceiveProps(object nextProps) 当Mounted组件接受新的props时调用。该方法主要用于比较this.props和nextProps以使用this.setState()执行状态转换。
2.2 shouldComponentUpdate(object nextProps,object nextState):boolean 当组件判断是否有保证DOM更新的改变时被调用。使用该方法作为比较this.props和nextProps、this.state和nextState的一种优化。如果React跳过更新,则返回false。
2.3 componentWillUpdate(object nextProps,object nextState) 更新前被调用。该方法内不能调用this.setState().
2.4 componentDidUpdate(object prevProps,object prevState) 更新完成后被调用。
3.Unmounting:组件被移除DOM
在本阶段,只有一个方法:
3.1 componentWillUnmount() 组件被移除和销毁前调用。此处应Cleanup。
4.实例
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
}, componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), );
}, render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
}); ReactDOM.render(
<Hello name="world"/>,
document.getElementById('content')
);
软件实现的功能:在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
注意:组件的style属性的设置方式也值得注意,不能写成style="opacity:{this.state.opacity};",而要写成style={{opacity: this.state.opacity}}。这是因为 React 组件样式是一个对象,所以第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。
浏览器效果:“Hello world”逐渐淡化消失(循环)
更多内容,请访问:http://www.cnblogs.com/BlueStarWei/
ReactJS入门3:组件的生命周期的更多相关文章
- ReactJS入门(二)—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- reactjs入门到实战(七)---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- ReactJS - 组件的生命周期
组件的生命周期分为三个状态 Mounting: 已插入真实DOM Updateing: 正在被重新渲染 Unmounting: 已移出真实DOM React 为每个状态都提供了两种处理函数,即函数在进 ...
- Blazor入门笔记(4)-组件的生命周期
1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 Blaz ...
- 202-React.Component组件、生命周期
一.概述 React可以将组件定义为类或函数.定义为类的组件当前提供了更多的功能.要定义React组件类,您需要扩展React.Component: class Welcome extends Rea ...
- react(一):组件的生命周期
最近兄弟团队让我去帮忙优化两个页面,前端用的react全家桶,后端用的python,上一次写react代码都过去一年了,顺着以前的的学习思路,再捋顺一下react的要点 组件的生命周期就是Reac的工 ...
- 【老孟Flutter】Stateful 组件的生命周期
老孟导读:关于生命周期的文章共有2篇,第一篇是介绍 Flutter 中Stateful 组件的生命周期. 博客地址:http://laomengit.com/blog/20201227/Statefu ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
- 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...
随机推荐
- java 构造器学习笔记
构造器(构造器不是方法也不是类的成员) 以前创建对象的方式, public class Constructor{ public static void main(String[] args){ per ...
- jquery.validate提示错误方法
修改jquery.validate提示错误方法,将错误信息用弹出框提示 <script src="@Url.Content("~/Scripts/jquery.validat ...
- 购物篮模型&Apriori算法
一.频繁项集 若I是一个项集,I的支持度指包含I的购物篮数目,若I的支持度>=S,则称I是频繁项集.其中,S是支持度阈值. 1.应用 "尿布和啤酒" 关联概念:寻找多篇文章中 ...
- UCSC genome browser 个人track 安装
处理基因组数据,很多时候我们会觉得直接看序列文件不够直观,如果绘图的话,把n多G把数据用画图出来不仅费劲,就算操作也不方便.因此我们可以用UCSC开发出的genome browser,可以直接把数据信 ...
- J2ee技术难点
J2ee技术难点 session/cookie区别联系 jsp/servlet区别联系 filter执行流程 openSessionInView原理 clone与servilizable区别联系 eq ...
- <c>----<choose><when><otherwise>
<c:choose> <c:when test="${username== '1' && password== '2'}"> <jsp ...
- jenkins配置邮箱服务器(126邮箱)
安装Email Extension Plugin 安装过程容易失败,多试几次 一.开启126邮件的SMTP获取授权码 二.配置管理员邮件地址 三.设置邮件通知 四.点击Test Configura ...
- JAVA高级总结
一.集合框架和泛型 1.集合框架 1) 定义:JAVA API的一部分,用于处理一组长度可变得数据. 2) 和数组的区别: 数组的长度不可变,但是集合框架处理的数据长度可以动态变化. 3) 结构: 接 ...
- C++primer拾遗(第二章:变量和基本类型)
这是我对c++primer第二章的一个整理总结,算是比较适用于我自己吧,一小部分感觉不用提及的就省略了,只提了一下平时不注意,或者不好记住的内容. 排版太费劲了,直接放了图片格式.从自己的oneNot ...
- Node软件的安装
1.官网网址:https://nodejs.org/en/ 左边被推荐,右边最新 下载完成一键下一步直接安装,当然,如果你想修改安装目录的话当然没问题,注意:不要有英文目录 2.Window+r打开命 ...