<!DOCTYPE html>

<html>

  <head>

    <script src="../../build/react.js"></script>

    <script src="../../build/react-dom.js"></script>

    <script src="../../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var Timer = React.createClass({

        getInitialState : function(){

          return {secondsElapsed:0};

        },

        tick : function(){

          this.setState({secondsElapsed:this.state.secondsElapsed + 1});

        },

        componentDidMount : function(){

            this.interval = setInterval(this.tick,1000);

        },

        componentWillUnmount : function(){

          clearInterval(this.interval);

        },

        render : function(){

          return (

            <div>secondsElapsed:{this.state.secondsElapsed}</div>

          )

        },

      });

      ReactDOM.render(

        <Timer />,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

　　

react-conponent-secondesElapsed的更多相关文章

  1. props & children

    一. choosing the type at runtime import React from 'react'; import { PhotoStory, VideoStory } from '. ...

  2. 正式学习React(五) react-redux源码分析

    磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里  shallowEqual.js export default function shallowEqual(objA, ...

  3. [React] 13 - Redux: react-redux

    Ref: Redux 入门教程(三):React-Redux 的用法 组件拆分规范 使用 React-Redux,需要掌握额外的 API,并且要遵守它的组件拆分规范. React-Redux 将所有组 ...

  4. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  5. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  6. RxJS + Redux + React = Amazing!（译一）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  7. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  8. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  9. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  10. RxJS + Redux + React = Amazing!（译二）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

随机推荐

  1. 细说MySQL表操作

    目录 语法 查看表结构 查看所有的表 删除表 查看创建表的语句 修改表的字符集和校验规则 修改表名 在表中添加新字段 修改表的字段名 修改表中字段的属性 删除表中的某个字段 设置某个字段为主键 把某个 ...

  2. 细说MySQL数据库操作

    目录 基本语法: 字符集和校验规则 字符集 校验规则 校验规则的影响 数据库操作相关指令 查询数据库版本 显示数据库语句 显示数据库创建语句 数据库删除语句 查看当前数据库有多少个用户在操作 基本语法 ...

  3. compose函数

    compose函数 在学习redux源码的时候看到了其中的工具函数compose,compose函数的作用就是组合函数,依次组合传入的函数: 后一个函数作为前一个函数的参数 最后一个函数可以接受多个参 ...

  4. 性能瓶颈之Source

    数据源的瓶颈通常发生从数据库读取数据的时候,原因通常如下: 1) 脚本的查询效率低下 2) 数据库网络包太小 如何判定源瓶颈 通过在session log中读取thread statistics判定源 ...

  5. 从零開始学Xamarin.Forms(一) 概述

        Xamarin 读 "ˈzæmərin",是一个基于开源项目mono的可以使用C#开发的收费的跨平台(iOS.Android.Windows Phone.Mac)解决方式. ...

  6. visual Studio 2017 扩展开发（二）《菜单图标详解》

    在上一篇我们在菜单栏创建了一个菜单,菜单上显示了一个图标跟文本.那么我们自己创建的菜单如何修改自定义的菜单图标呢.下面娓娓道来..... 首先你要有一个图,创建一个32位的位图.这个位图的像素是16p ...

  7. PHP取得json前面有乱码(去除文件头部BOM)

    curl请求接口时,返回结果如下: {} 想把json转换成数组或者对象,但是用json_decode返回是空的,然后用var_dump打印了一下返回结果,发现结果如下: ) 发现前面多了两个字符,因 ...

  8. mysql 开发进阶篇系列 8 锁问题 (共享锁与排它锁演示)

    1 .innodb 共享锁(lock in share mode)演示 会话1 会话2 SET autocommit=0; SELECT cityname FROM  city WHERE city_ ...

  9. jsp fmt页面显示value does not support runtime expressions

    最近使用Struts2+Spring3+Mybatis3做一个项目,在用户修改页面显示生日, <fmt:formatDate value="${user.birthday}" ...

  10. HashMap源码之构造函数--JDK1.8

    构造函数 变量解释 capacity,表示的是hashmap中桶的数量,初始化容量initCapacity为16,第一次扩容会扩到64,之后每次扩容都是之前容量的2倍,所以容量每次都是2的次幂 loa ...