<!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. ceph部署实践（mimic版本）

    一.准备环境 4台adminos7.4 环境,存储节点上两块磁盘(sda操作系统,sdb数据盘) clientadmin storage1storage2storage3 二.配置环境 1.修改主机名 ...

  2. 按行读取.txt文件，并按行写入到新文件中

    package com.test.io; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fi ...

  3. 【转】Pandas的Apply函数——Pandas中最好用的函数

    转自:https://blog.csdn.net/qq_19528953/article/details/79348929 import pandas as pd import datetime #用 ...

  4. python 数据结构 - 栈

    如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10293388.html 欢迎关注小婷儿的博客: 有问题请在博客下留言或加作者微信:t ...

  5. 小程序 获取微信小程序的源码

    1.微信小程序是以wxapkg可执行文件的形式存在本地的 2.网上有工具可以把wxapkg文件还原成源代码: https://github.com/qwerty472123/wxappUnpacker ...

  6. ASP.NET Newtonsoft 序列化反序列化

    1.NuGet 安装 Newtonsoft 2.调用方法 一 NuGet 安装 Newtonsoft 二 调用方法 Student stu = new Student(); stu.ID = &quo ...

  7. Android学习之基础知识十一 —运用手机多媒体

    一.使用通知(Notification) 通知(Notification)是Android系统中比较有特色的一个功能,当某个应用程序希望向用户发出一些提示信息,而该应用程序又不在前台运行时,就可以借助 ...

  8. ftrace利器之trace-cmd和kernelshark

    关键词:ftrace.trace-cmd.kernelshark. trace-cmd是设置读取ftrace的命令行工具,kernelshark既可以记录数据,也可以图形化分析结果. trace-cm ...

  9. HashMap 的实现原理

    hashMap用了一个名字为table的数组:还有若干个名字为entry的链表.看hashMap是如何应用这些数据结构的.用插 入<key,value>举例:hashMap首先会通过key ...

  10. http一次请求过程

    物理层:支持底层网络协议: 其中网络层支持IP协议: 传输层支持TCP协议,它是面向连接的: 应用层支持 http,ftp  tftp,SMTP,DHCP协议 一个完整的http请求过程: 1.浏览器 ...