<!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. solidity ecrecover

    https://solidity.readthedocs.io/en/latest/units-and-global-variables.html#mathematical-and-cryptogra ...

  2. Echo团队Alpha冲刺随笔集合

    班级:软件工程1916|W 作业:项目Alpha冲刺(团队) 团队名称:Echo 作业目标:完成项目Alpha冲刺 代码规范.冲刺任务与计划 Day 0: 代码规范.任务及计划 冲刺随笔 Day 1: ...

  3. MySQL 基础七 视图

    -- 查看表 SELECT * FROM student; SHOW CREATE TABLE student; -- 创建视图 CREATE VIEW v_student1 AS SELECT *F ...

  4. 【Codeforces 710F】String Set Queries

    Codeforces 710 F 思路:KMP学的还是不过关啊... 按照字符串的长度分类,如果长度大于\(\sqrt{n}\)的就扔到什么地方等待查询,否则就扔进trie里面. 对于查询,我们先在t ...

  5. Android学习之基础知识五—创建自定义控件

    下面是控件和布局的继承关系: 从上面我们看到: 1.所有控件都是直接或间接继承View,所有的布局都是直接或间接继承ViewGroup 2.View是Android中最基本的UI组件,各种组件其实就是 ...

  6. linux中断源码分析 - 概述(一)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 关于中断和异常 一般在书中都会把中断和异常一起说明,因为它们具有相同的特点,同时也有不同的地方.在CPU里,中断 ...

  7. 5分钟教你学会Django系统错误监控

    一.监控所有的request请求 如何实现系统监控,自动发送错误日志的邮件呢? 只需配置配置settings文件即可. 1.设置发送邮件配置信息 邮件会发送到ADMINS设定的邮件列表中. SERVE ...

  8. url 传递中文参数乱码问题的终极解决方法。

    估计很多人在做web开发的时候,都会碰到过url传递中文参数,有时候会出现乱码的问题,但有些项目或者环境,又不会有问题.当遇到乱码的时候,上网找了很多解决方案,比如: 页面设置它的编码方式,改成utf ...

  9. zookeepeer使用zkCli.sh命令

    一.连接服务器端 [root@sxl132 zookeepeer]# ./bin/zkCli. Connecting to -- ::, [myid:] - INFO [main:Environmen ...

  10. LNMP 1.x升级到LNMP 1.4教程及注意事项和多PHP版本使用教程

    LNMP 1.x版本基本都可以正常升级到1.4使用1.4的管理脚本和新的功能. 升级管理脚本:wget -c http://soft.vpser.net/lnmp/lnmp1.4.tar.gz &am ...