<!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. windos 系统文件包含

    解决VS2013找不到windows.h文件方法 右键属性管理器添加 包含路径(依据sdk安装目录,我的是64位系统) C:\Program Files (x86)\Microsoft SDKs\Wi ...

  2. 转载 SpringMVC详解（二）------详细架构

    目录 1.SpringMVC 详细介绍 2.SpringMVC 处理请求流程 3.配置前端控制器 4.配置处理器适配器 5.编写 Handler 5.配置处理器映射器 6.配置视图解析器 7.Disp ...

  3. 20175310 迭代和JDB

    迭代和JDB 1 使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能 zuheshu.java文件夹下的代码: import java.util.S ...

  4. Python将数据渲染到docx文档指定位置

    超简单Python将指定数据插入到docx模板渲染并生成 最近有一个需求,制作劳动合同表,要从excel表格中将每个人的数据导入到docx劳动合同中,重复量很大,因此可以使用python高效解决.为了 ...

  5. http/2 多路复用技术

    虽然 HTTP 1.1 默认启用长TCP连接,但所有的请求-响应都是按序进行的(这里的长连接可理解成半双工协议.即便是HTTP 1.1引入了管道机制,也是如此).复用同一个TCP连接期间,即便是通过管 ...

  6. Linux命令——head/tail

    一.head head主要是用来显示档案的开头至标准输出中,默认打印相应文件的开头10 行. 1)命令格式 head [参数] [文件] 2)常用参数 -q     隐藏文件名-v     显示文件名 ...

  7. 常用gcc选项

    <Linux GCC常用命令> Makefile有三个非常有用的变量.分别是$@,$^,$<代表的意义分别是: $@--目标文件,$^--所有的依赖文件,$<--第一个依赖文件 ...

  8. day90

    Vue项目简介 最终效果:Vue通过axios发请求给Django后台,Django返回数据给Vue 创建项目: 创建vue项目: -安装node.js -vue脚手架 -vue create 项目名 ...

  9. BAT特殊字符

    BAT特殊字符1. 点 与echo连用,作用是换行 示例1 [输出空行] echo. 2 > 定向符[输出] 将命令的输出进行重定向 [一般用于将结果写入文件] 注意 nul 为空设备 > ...

  10. LINQ Group By操作（转载）

    假设我们需要从两张表中统计出热门商圈,这两张表内容如下: 上表是所有政区,商圈中的餐饮个数,名为FoodDistrict 下表是所有政区,商圈中的SPA个数,名为SPADistrict 现在要把这两张 ...