react -- 计时器

var SetIntervalMixin = {
componentWillMount: function(){
this.intervals = [];
},
setInterval: function(){
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function(){
this.intervals.forEach(clearInterval);
}
};

var TickTock = React.createClass({
mixins: [SetIntervalMixin],
getInitialState: function(){
return { seconds: 0 }
},
componentDidMount: function(){
this.setInterval(this.tick, 1000);
},
tick: function(){
this.setState({ seconds: this.state.seconds + 1 });
},
render: function(){
return (
<p>React has been running for {this.state.seconds} seconds.</p>
);
}
});

ReactDOM.render(
<TickTock />,
document.querySelector(‘.demo‘)
);

时间: 2024-12-29 23:14:13

react -- 计时器的相关文章

批量清除react中的计时器小组件

在Timers的父组件被卸载时,批量清除各个计时器.

用react结合mvc模式写计时器 -0+

组件js 1 import React, { Component } from 'react'; class Text extends Component { // model constructor(p) { super(p); this.state = { count: 0 } } // view render() { return ( <div> <button onClick={this.decFunc.bind(this)}>-</button> <la

正式学习React( 三)

最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了. 下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习. 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的变化.组件本质上是状态机:对于特定的输入,它总会返回一致的输出. ???????React为每个组件提供的生命周期分三个阶段:  一.实例化: getDefaultProps:组件初次实例化创建(不管是否成功)才会被调用,

不要依赖计时器中の时间

有很多需求都是需要计时器的 比如那种常见的倒计时 虽然很简单 但是其中也有许多糟糕的实现 计时器只能提供到某个时间点触发某个队列的功能  而具体触发的时间点是不确定的 比如在计时器中递增或递减某个变量某个行为 就不适合倒计时这种实现 如下代码 var t = 100; setTinterval(function(){ --t; }); 这种代码做倒计时就是个大坑 如果你把窗口切换了 倒计时功能直接傻逼了 再加上触发的间隔也不能保证  如果期间又插进来一个耗时较长的消息队列 那么你的倒计时功能又再

从省市区多重级联想到的,react和jquery的差别

在我们的前端项目里经常会用到级联的select,比如省市区这样.通常这种级联大多是动态的.比如先加载了省,点击省加载市,点击市加载区.然后数据通常ajax返回.如果没有数据则说明到了叶子节点. 针 对这种场景,如果我们使用jquery来实现,要考虑很多的问题,数据部分,以及大量的dom操作.比如这个页面上显示了某个区,这时候我切换省,要把市 重新初始化数据,然后区域的部分要从页面中删除.这个判断是非常烦躁的.所以之前碰到这个问题时,就直接使用递归删除省下面的所有子,然后再重新生成市. 所以jqu

Angular.js、React.js整合

必备知识 Requirejs.Angularjs.Reactjs,可查看本博客写的相关内容进行必备知识了解. 整合Angular.js.React.js 本人在angular.js之爱恨情仇中已提到过Angular.js的性能问题,而React.js基于virtual dom的方式渲染页面,在性能上有不错的表现,所以在系统中整合了React.js. Requirejs配置 requirejs.config({ baseUrl: '/', paths: { 'jquery': 'libs/jque

计时器60s

计时器是经常用到的功能,下面以react nativ的例子简介来写一个倒计时60s的小demo. 代码如下: import React, { Component } from 'react'; import { Text, View, TouchableOpacity } from 'react-native'; import { Button, Content, Container, Header, InputGroup, Input, List, ListItem, Thumbnail, T

React学习笔记-7-销毁阶段

销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一种方式:在render中,把之前已有的页面去掉,反映到页面中,就是把它删掉. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

node.js学习笔记之React

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http://facebook.github.io/react/ Github地