<!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. Vim，Emacs排名不分先后

    关键词:Vim,Emacs,Vim和Emacs之争 一同时提到vim和emacs,就几乎一定引发关于哪个更好的圣战.据说这个圣战从很早就开始了,偶尔还会有windows下的ultraedit的用户来凑 ...

  2. html向js传递id

    html获取id方法: <div id="thediv1" style="display:block" onclick="ceshi(this. ...

  3. 状压dp（B - 炮兵阵地 POJ - 1185 ）

    题目链接:https://cn.vjudge.net/contest/276236#problem/B 题目大意:略  具体思路:和我的上一篇写状压dp的思路差不多,不过就是这个题相当于上一个题的升级 ...

  4. Ubuntu 12.04 更新源的方法及地址

    本文章转自:http://www.maybe520.net/blog/424/ 安装好ubuntu 12.04之后,可以联网之后,马上要做的最重要的事情之一就是配置更新源列表,这样以后安装更新或者软件 ...

  5. cin.get()和cin.getline()之间的区别

    cin.getline()和cin.get()都是对输入的面向行的读取,即一次读取整行而不是单个数字或字符,但是二者有一定的区别. cin.get()每次读取一整行并把由Enter键生成的换行符留在输 ...

  6. msfpayload反弹shell

    1.前期-- 情景就是当我们获得webshell时,我们想留下我们的后门,这个时候我们可以用到msfpayload与msfconsole结合使用 启动PostgreSQL服务:service post ...

  7. MySQL防范SQL注入风险

    MySQL防范SQL注入风险 0.导读 在MySQL里,如何识别并且避免发生SQL注入风险 1.关于SQL注入 互联网很危险,信息及数据安全很重要,SQL注入是最常见的入侵手段之一,其技术门槛低.成本 ...

  8. TCP确认延时和Nagle算法

    TCP确认延时和Nagle算法 nagle 算法是   发送端 收到前一个报文的确认然后再发送下一个tcp数据.这样可以避免大量的小数据. TCP_NODELAY选项控制. Delay ACK是   ...

  9. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  10. Android Bander设计与实现 - 设计

    Binder Android IPC Linux 内核 驱动 摘要 Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有管道,system V IPC,socket等IPC ...