本文主要介绍组件的生命周期。

组建的生命周期主要分为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:组件的生命周期的更多相关文章

  1. ReactJS入门(二)—— 组件的生命周期

    如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...

  2. reactjs入门到实战(七)---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

  3. ReactJS - 组件的生命周期

    组件的生命周期分为三个状态 Mounting: 已插入真实DOM Updateing: 正在被重新渲染 Unmounting: 已移出真实DOM React 为每个状态都提供了两种处理函数,即函数在进 ...

  4. Blazor入门笔记(4)-组件的生命周期

    1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 Blaz ...

  5. 202-React.Component组件、生命周期

    一.概述 React可以将组件定义为类或函数.定义为类的组件当前提供了更多的功能.要定义React组件类,您需要扩展React.Component: class Welcome extends Rea ...

  6. react(一):组件的生命周期

    最近兄弟团队让我去帮忙优化两个页面,前端用的react全家桶,后端用的python,上一次写react代码都过去一年了,顺着以前的的学习思路,再捋顺一下react的要点 组件的生命周期就是Reac的工 ...

  7. 【老孟Flutter】Stateful 组件的生命周期​

    老孟导读:关于生命周期的文章共有2篇,第一篇是介绍 Flutter 中Stateful 组件的生命周期. 博客地址:http://laomengit.com/blog/20201227/Statefu ...

  8. React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...

  9. 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...

随机推荐

  1. java 构造器学习笔记

    构造器(构造器不是方法也不是类的成员) 以前创建对象的方式, public class Constructor{ public static void main(String[] args){ per ...

  2. jquery.validate提示错误方法

    修改jquery.validate提示错误方法,将错误信息用弹出框提示 <script src="@Url.Content("~/Scripts/jquery.validat ...

  3. 购物篮模型&Apriori算法

    一.频繁项集 若I是一个项集,I的支持度指包含I的购物篮数目,若I的支持度>=S,则称I是频繁项集.其中,S是支持度阈值. 1.应用 "尿布和啤酒" 关联概念:寻找多篇文章中 ...

  4. UCSC genome browser 个人track 安装

    处理基因组数据,很多时候我们会觉得直接看序列文件不够直观,如果绘图的话,把n多G把数据用画图出来不仅费劲,就算操作也不方便.因此我们可以用UCSC开发出的genome browser,可以直接把数据信 ...

  5. J2ee技术难点

    J2ee技术难点 session/cookie区别联系 jsp/servlet区别联系 filter执行流程 openSessionInView原理 clone与servilizable区别联系 eq ...

  6. <c>----<choose><when><otherwise>

    <c:choose> <c:when test="${username== '1' && password== '2'}"> <jsp ...

  7. jenkins配置邮箱服务器(126邮箱)

    安装Email Extension Plugin 安装过程容易失败,多试几次 一.开启126邮件的SMTP获取授权码 二.配置管理员邮件地址   三.设置邮件通知 四.点击Test Configura ...

  8. JAVA高级总结

    一.集合框架和泛型 1.集合框架 1) 定义:JAVA API的一部分,用于处理一组长度可变得数据. 2) 和数组的区别: 数组的长度不可变,但是集合框架处理的数据长度可以动态变化. 3) 结构: 接 ...

  9. C++primer拾遗(第二章:变量和基本类型)

    这是我对c++primer第二章的一个整理总结,算是比较适用于我自己吧,一小部分感觉不用提及的就省略了,只提了一下平时不注意,或者不好记住的内容. 排版太费劲了,直接放了图片格式.从自己的oneNot ...

  10. Node软件的安装

    1.官网网址:https://nodejs.org/en/ 左边被推荐,右边最新 下载完成一键下一步直接安装,当然,如果你想修改安装目录的话当然没问题,注意:不要有英文目录 2.Window+r打开命 ...