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/ 功能: 输入待做事项,回车,把任务添加到 [正在进行] [正在进行] 任务,勾选之后,变成已[经完成事项] [已完成事务], ...
随机推荐
- esp8266(3) Arduino通过ESP8266连接和获取网站源代码
http://www.plclive.com/a/tongxinjiekou/2016/0422/374.html 在上一篇8266的基础上,这一篇做个具体的连接网站的例子,供大家参考.上一篇基础篇请 ...
- yarn出现“There are no scenarios ; must have at least one"
错误信息:“There are no scenarios ; must have at least one" 背景:在将vscode自动化构建编译打包时出现这种情况,主要是执行yarn这一步 ...
- nodejs写入json文件，格式化输出json的方法
假如我需要把data序列化成json字符串,然后写入data.json文件中,代码如下: let str = JSON.stringify(data) fs.writeFile('data.json' ...
- PAT A1129 Recommendation System （25 分）——set，结构体重载小于号
Recommendation system predicts the preference that a user would give to an item. Now you are asked t ...
- Apache IOUtils的使用
IOUtils 与 FileUtilsCommons IO 是 apache 的一个开源的工具包,封装了 IO操作的相关类,使用 Commons IO 可以很方便的读写文件 commons.jar 包 ...
- Vue-详解设置路由导航的两种方法： <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
- CSV文件解析
CSV(逗号分隔值文件格式) 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和 ...
- ListView 控件和 INotifyPropertyChanged 接口
原文:ListView 控件和 INotifyPropertyChanged 接口 ListView 控件和 DataGridView 控件 ListView 是跟 Winform 中 DataGri ...
- CQOI2018简要题解
CQOI2018简要题解 D1T1 破解 D-H 协议 题意 Diffie-Hellman 密钥交换协议是一种简单有效的密钥交换方法.它可以让通讯双方在没有事先约定密钥(密码)的情况下,通过不安全的信 ...
- c#通用配置文件读写类与格式转换（xml,ini,json）
.NET下编写程序的时候经常会使用到配置文件.配置文件格式通常有xml.ini.json等几种,操作不同类型配置文件需要使用不同的方法,操作较为麻烦.特别是针对同时应用不同格式配置文件的时候,很容易引 ...