<!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. SpringMVC FistMVC详解

    实现一个简单的SpringMVC框架的配置 1.依赖 这是mybatis+spring+现在需要的依赖 <dependency> <groupId>junit</grou ...

  2. Spring Boot 主类及目录结构介绍

    Spring Boot 与传统项目最大的区别是,传统项目都是打成 WAR 包部署到服务器上面,需要额外的 Servlet 容器, 而 Spring Boot 则可以直接打成 jar 包,并内置集成了 ...

  3. SpringDataJPA与Mybatis的优异性

    首先表达个人观点,JPA必然是首选的. 个人认为仅仅讨论两者使用起来有何区别,何者更加方便,不足以真正的比较这两个框架.要评判出更加优秀的方案,我觉得可以从软件设计的角度来评判.个人对 mybatis ...

  4. preg_replace的一些细节

    .$pattern是数组,$replace也是数组,则中对应的 元素进行替换 php preg_replace有五个参数,有三个是必须参数 Preg_replace(mixed $pattern, m ...

  5. Apache Pulsar简介

    Apache Pulsar What is Pulsar "Pulsar is a distributed pub-sub messaging platform with a very fl ...

  6. java jar 后台运行

    nohup java -jar $APP_NAME.jar >/dev/null &

  7. unittest单元测试框架

    unittest单元测试框架 概述: 单元测试框架主要用来完成以下三件事: 提供用例组织与执行:当测试用例只有几条时,可以不必考虑用例的组织,但是当用例达到成百上千条时,大量的用例堆砌在一起,就产生了 ...

  8. ZOJ Problem Set - 3706

    #include <cstdio> #include <cstdlib> #include <cstring> #include <set> #incl ...

  9. ⑤早起的鸟儿有虫吃-JSTL核心标签库[收藏]

    介绍 JSTL 全名为Java Server Pages Standard Tag Library(JSP Standard Tag Library),它的中文名称为JSP 标准标签函数库. Web  ...

  10. MySQL数据库——表操作

    I.表操作 一.创建表 基本语法如下: create table 表名( 列名 类型 是否可以为空, 列名 类型 是否可以为空 )ENGINE=InnoDB DEFAULT CHARSET=utf8: ...