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/ 功能: 输入待做事项,回车,把任务添加到 [正在进行] [正在进行] 任务,勾选之后,变成已[经完成事项] [已完成事务], ...
随机推荐
- 深入springboot原理——动手封装一个starter
从上一篇文章<深入springboot原理——一步步分析springboot启动机制(starter机制)> 我们已经知道springboot的起步依赖与自动配置的机制.spring-bo ...
- MATLAB——神经网络train函数
- MySQL 基础八 用户管理
SELECT * FROM student INSERT INTO student(NAME,sex,createuser,createtime) VALUES('jack','男','ligenyu ...
- FreeRTOS学习笔记--任务优先级
FreeRTOSConfig.h 中的常量configMAX_PRIORITIES的值就是任务优先级的最大数值,这个数值可以按照自己的需要改动,当然值越大,内核对内存的开销就越大,一般设置一个满足自己 ...
- JAVA中map的分类和各自的特性
java为数据结构中的映射定义了一个接口java.util.Map,他实现了四个类,分别是:HashMap,HashTable,LinkedHashMapTreeMap Map不允许键重复,但允许值重 ...
- mysql 修改字段
alter table dev_instant_video modify column content varchar(2500)alter table dev_instant_video_info ...
- GIT 分支管理：创建与合并分支、解决合并冲突
分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇宙合并 ...
- Luogu2178 NOI2015 品酒大会 SA、并查集
传送门 感觉题目讲的很不清楚-- 题目意思就是给出一个长度为\(n\)的字符串,求对于\(r=0,1,...,n-1\),求出\(LCP(suffix_p,suffix_q) \geq r\)的无序数 ...
- (转)Xpath语法格式整理
原文 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时间,所以对XPath归纳及总结一下. 在这篇文章中你将 ...
- java json字符串传递给 js 时 特殊字符转义错误 研究
一些换行 回车等符号需要转义 主要注意 单引号 与双引号. 一 如果js以 双引号接收字符串 则转单引号 " 至 \" 否则js报错 二 如果js以 单引号接收字符串 则转单引号 ...