<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Hello React!</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

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

<script type="text/babel">

class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {date: new Date(),name : 'zzw'};

  }

  render() {

    return (

      <div>

        <h1>Hello, world!</h1>

        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>

        <h3>writer is {this.state.name}.</h3>

      </div>

    );

  }

}

ReactDOM.render(

  <Clock />,

  document.getElementById('example')

);

</script>

</body>

</html>

react篇章-React State(状态)的更多相关文章

  1. react篇章-React Props

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...

  2. react篇章-React State(状态)-组件都是真正隔离的

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  3. react篇章-React State(状态)-数据自顶向下流动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  4. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

  5. react篇章-React Props-Props 验证

    React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...

  6. react篇章-React 组件-复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  7. react篇章-React 组件-向组件传递参数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  8. react篇章-React 组件-ES6 class 来定义一个组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. React篇章-React 组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

随机推荐

  1. Java并发编程原理与实战四十一：重排序 和 happens-before

    一.概念理解 首先我们先来了解一下什么是重排序:重排序是指编译器和处理器为了优化程序性能而对指令序列进行重新排序的一种手段. 从Java源代码到最终实际执行的指令序列,会分别经历下面3种重排序,如下图 ...

  2. Python 豆瓣顶帖

    由于在豆瓣发了个租房帖子,发现很快就被其他的帖子淹没,但是手动顶帖实在太累,

  3. JDK各版本新特性总结

    序言 北风潜入悄无声,未品浓秋已立冬. JDK1.1--1996 JDK1.2--1998 JDK1.3--2000 JDK1.4--2002 JDK5.0--2004 JDK6.0--2006 JD ...

  4. Elasticsearch技术解析与实战（五）Document解析

    1.手动指定document id 一般来说,是从某些其他的系统中,导入一些数据到es时,会采取这种方式,就是使用系统中已有数据的唯一标识,作为es中document的id. PUT /index/t ...

  5. 如何定制Gtk版Emacs的Widget外观

    当我们使用 xlib 版的Emacs时,可以通过 XResource 定义 Emacs 的菜单 栏.工具条.滚动条的外观. 现在,在Linux上我们大多使用 gtk版的Emacs,是否还有办法定义 E ...

  6. [转]Linux 线程分离状态

    线程的分离与结合 在任何一个时间点上,线程是可结合的(joinable),或者是分离的(detached).一个可结合的线程能够被其他线程收回其资源和杀死:在被其他线程回收之前,它的存储器资源(如栈) ...

  7. linux下使用indent整理代码(代码格式化)【转】

    转自:https://blog.csdn.net/jiangjingui2011/article/details/7197069 常用的设置: indent -npro -kr -i8 -ts8 -s ...

  8. TableView 的那些坑

    1. 分割线填满cell宽度, 并且设置分割线的颜色 1.1 利用系统的分割线填充 1.1.1 tableView 设置如下属性 // 给tableView设置如下属性值 tableView.layo ...

  9. geoserver 启动闪退

    跟JDK版本有关: 比如geoserver2.11需要JDK版本为JDK1.8 windows配置两个jdk环境: 网上有方法,但如果只需要满足geoserver的话,可以只安装jdk(注意jdk和j ...

  10. Kaggle案例分析1--Bestbuy

    1. 引言 Kaggle是一个进行数据挖掘和数据分析在线竞赛网站, 成立于2010年. 与Kaggle合作的公司可以提供一个数据+一个问题, 再加上适当的奖励, Kaggle上的计算机科学家和数据科学 ...