<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
  var LifeComponent = React.createClass({
    componentDidMount:function(){
      setInterval(
      function(){
        var nowValue = this.state.opacityValue;
        nowValue+=0.1;
        if(nowValue > 1)
        {
          nowValue = 0;
        }

        this.setState({opacityValue:nowValue},function(){
          console.log(this.state.opacityValue);
        });

      }.bind(this),100
      )
    },
    getInitialState:function(){
      return {opacityValue:0}
    },
    render:function(){
      return <div style={{opacity:this.state.opacityValue}}>
        Hello LifeCycle
      </div>
    }
  })

  ReactDOM.render(
  <LifeComponent/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React componentDidMount的更多相关文章

  1. 写的模块和方法 wap 和 pc

    createjs 画了一个曲线功能 rem 的适配方式 $.fn.stop 方法, zepto 没有的, 对于 2d的旋转 变形 还有 移动都可以停下来, 做动画的属性存储, getComputedS ...

  2. 【水滴石穿】react-native-book

    先推荐一个学习的地址:https://ke.qq.com/webcourse/index.html#cid=203313&term_id=100240778&taid=12778558 ...

  3. There is an internal error in the React performance measurement code.Did not expect componentDidMount timer to start while render timer is still in progress for another instance

    一.There is an internal error in the React performance measurement code.Did not expect componentDidMo ...

  4. React(0.13) 利用componentDidMount 方法设置一个定时器

    <html> <head> <title>hello world React.js</title> <script src="build ...

  5. react手记（componentWillMount，componentDidMount等）

    生命周期componentWillMount 组件出现前 就是dom还没有渲染到html文档里面componentDidMount 组件渲染完成 已经出现在dom文档里可以再各个周期实现特定的操作 生 ...

  6. [React] Understanding setState in componentDidMount to Measure Elements Without Transient UI State

    In this lesson we'll explore using setState to synchronously update in componentDidMount. This allow ...

  7. React每隔0.2s颜色变淡 之生命周期 ，componentDidMount表示组件已经挂载

    05案例 每隔0.2s颜色变淡 componentDidMount表示组件已经挂载,可以进行DOM操作 import React, { Component } from "react&quo ...

  8. react请求接口数据是在componentDidMount 还是componentWillMount周期好

    如果你要获取外部数据并加载到组件上,只能在组件"已经"挂载到真实的网页上才能作这事情,其它情况你是加载不到组件的.componentDidMount方法中的代码,是在组件已经完全挂 ...

  9. 八、React实战：可交互待办事务表（表单使用、数据的本地缓存local srtorage、生命同期函数（页面加载就会执行函数名固定为componentDidMount()））

    一.项目功能概述 示例网址:http://www.todolist.cn/ 功能: 输入待做事项,回车,把任务添加到 [正在进行] [正在进行] 任务,勾选之后,变成已[经完成事项] [已完成事务], ...

随机推荐

  1. day14 Python函数之可变长参数

    函数参数 1.形参变量只有在被调用时才分配内存单元,在调用结束时,即刻释放所分配的内存单元.因此,形参只在函数内部有效.函数调用结束返回主调用函数后则不能再使用该形参变量 2.实参可以是常量.变量.表 ...

  2. iptables四表五链及默认规则使用，

    网络基础 TCP/IP模型: 应用层===传输层===网络层===数据链里层===物理层 数据封装: MAC帧头+IP报头+TCP/UDP报头===HTTP请求 数据帧 TCP/UDP报头: 随机产生 ...

  3. flask 路由和视图

    路由设置的俩种方式 @app.route('/xxx') def index(): return 'index' ------------------------------------------ ...

  4. 阿里图标库使用IconFont

    1.注册账号登陆 2.创建项目 3.搜索想使用的图标,添加入库,或者上传自己的图标入库 4.在图标库中,将添加的图标加入项目 5.将项目图标下载至本地 6.下载文件为 包括三种格式,使用方法不同 Un ...

  5. python3.6.4源码安装

    该脚本适合centos6和ubuntu用,关于debian可以根据脚本中的范例自己添加 微笑哥与你每天进步一点点 #!/bin/bash##Check systemcheck_sys(){ local ...

  6. Objective-C 性能监控

    1.内存监控 2.卡顿监控 3.fps监控

  7. C++基类的析构函数定义为虚函数的原因

    1:每个析构函数只会清理自己的成员(成员函数前没有virtual).2:可能是基类的指针指向派生类的对象,当析构一个指向派生类的成员的基类指针,这时程序不知道这么办,可能会造成内存的泄露,因此此时基类 ...

  8. java算法----排序----（6）希尔排序（最小增量排序）

    package log; public class Test4 { /** * java算法---希尔排序(最小增量排序) * * @param args */ public static void ...

  9. 重装系统之win10不能进入bios界面

    原因 自Win10发布以来,新出厂的预装Win10的电脑都默认在UEFI模式下启动操作系统.UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提 ...

  10. LiveCharts文档-4基本绘图-1基本线条图

    原文:LiveCharts文档-4基本绘图-1基本线条图 4基本绘图-1基本线条图 using System; using System.Windows.Forms; using System.Win ...