React componentDidMount
<!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的更多相关文章
- 写的模块和方法 wap 和 pc
createjs 画了一个曲线功能 rem 的适配方式 $.fn.stop 方法, zepto 没有的, 对于 2d的旋转 变形 还有 移动都可以停下来, 做动画的属性存储, getComputedS ...
- 【水滴石穿】react-native-book
先推荐一个学习的地址:https://ke.qq.com/webcourse/index.html#cid=203313&term_id=100240778&taid=12778558 ...
- 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 ...
- React(0.13) 利用componentDidMount 方法设置一个定时器
<html> <head> <title>hello world React.js</title> <script src="build ...
- react手记（componentWillMount，componentDidMount等）
生命周期componentWillMount 组件出现前 就是dom还没有渲染到html文档里面componentDidMount 组件渲染完成 已经出现在dom文档里可以再各个周期实现特定的操作 生 ...
- [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 ...
- React每隔0.2s颜色变淡 之生命周期 ，componentDidMount表示组件已经挂载
05案例 每隔0.2s颜色变淡 componentDidMount表示组件已经挂载,可以进行DOM操作 import React, { Component } from "react&quo ...
- react请求接口数据是在componentDidMount 还是componentWillMount周期好
如果你要获取外部数据并加载到组件上,只能在组件"已经"挂载到真实的网页上才能作这事情,其它情况你是加载不到组件的.componentDidMount方法中的代码,是在组件已经完全挂 ...
- 八、React实战：可交互待办事务表（表单使用、数据的本地缓存local srtorage、生命同期函数（页面加载就会执行函数名固定为componentDidMount()））
一.项目功能概述 示例网址:http://www.todolist.cn/ 功能: 输入待做事项,回车,把任务添加到 [正在进行] [正在进行] 任务,勾选之后,变成已[经完成事项] [已完成事务], ...
随机推荐
- Matlab 学习视频集合
http://www.ilovematlab.cn/thread-22239-1-1.html
- java FTP各种操作
package com.ailk.qw.util; import it.sauronsoftware.ftp4j.*;import org.slf4j.Logger;import org.slf4j. ...
- Springboot入门程序
springboot简化之前的很多xml文件,不需要大量配置xml文件,没有很多xml文件是多么的愉快 下面进入正题,演示简单的入门程序,虽然简单,但足以振奋初学者们 我新建的工程名叫hello,大家 ...
- jmeter（二十）阶梯式加压测试
性能测试中,有时需要模拟一种实际生产中经常出现的情况,即:从某个值开始不断增加压力,直至达到某个值,然后持续运行一段时间. 在jmeter中,有这样一个插件,可以帮我们实现这个功能,这个插件就是:St ...
- 授人以鱼不如授人以渔——和女儿学一起学成语
女儿二年级了,前段时间背了<小学生必背古诗词75首>,采用几天一篇,然后滚动复习这种方式.磕磕绊绊也把一本古诗背了一遍,效果吗?是有的,但是不怎么明显,前面背,后面忘.当然这是规律,难免的 ...
- [05] 动态SQL
MyBatis的强大特性之一就是它的动态SQL,它可以根据不同的条件动态地组成SQL语句进行执行.为此,MyBatis提供了一系列强大的表达式,本章将就此进行学习,主要内容直接参考的是官方文档< ...
- 9、链表 & 状态机 & 多线程
链表的引入 从数组的缺陷说起 数组有2个缺陷:一个是数组中所有元素的类型必须一致:第二个是数组的元素个数必须事先制定并且一旦指定之后不能更改. 如何解决数组的2个缺陷:数组的第一个缺陷靠结构体去解决. ...
- 4.1《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—目录结构
Unix风格的目录结构通常使用一个目录名列表并用正斜杠分隔来表示,这样我们可以结合ls命令: $ ls /Users/mhartl/ruby 或者 $ ls /usr/local/bin 正如图20, ...
- LOJ2803 CCC2018 平衡树 数论分块、记忆化搜索
传送门 题意差评,其实就是一个递推式:\(f_1 = 1 , f_i = \sum\limits_{j=2}^i f_{\lfloor \frac{i}{j} \rfloor}\),然后求\(f_N\ ...
- BZOJ3149 CTSC2013 复原 搜索
传送门 \(N \leq 20\)很适合暴搜-- 第二问最大独立集裸题,\(O(2^NN)\)的算法都能过-- 考虑第一问,使用搜索寻找可行解 每一次枚举一条弦的两个端点,通过位运算计算与其相交的弦的 ...