<!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. zz 启动Matlab提示Microsoft Visual C++ 2005 Redistributable存在问题问题

    帮助领导搞Matlab 2010a 绿色版; 领导把绿色版的文件夹挪了一下位置 (领导就是领导,做什么都按照自己的想当然的想法做) 然后, 脆弱的绿色版Matlab 2010a Portable就罢工 ...

  2. python核心编程笔记——Chapter6

    Chapter 6.序列:字符串,列表和元组 这章内容比较多啊,看得比较久,而且题目又难很多. 6.1鉴定一个字符串是否是另外一个字符串的字串,这道题目不是很确定,好像没有直接的判定吧. 直接是否内建 ...

  3. Web应用开发中的几个问题

    Introduction 由于Ajax技术在Gmail中的成功应用和高性能的V8引擎的推出使得编写Web应用变得流行 起来,使用前端技术也可以编写具有复杂交互的应用.相对于native应用,Web应用 ...

  4. Bzoj1939 [Croatian2010] Zuma

    Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 43  Solved: 31 Description 有一行 N 个弹子,每一个都有一个颜色.每次可以让超过 ...

  5. EF记录统一添加创建，修改时间

    public class BaseEntity { public DateTime? DateCreated { get; set; } public string UserCreated { get ...

  6. 阿里云CentOS下安装jdk

    首先需要下载jdk: 由于oracle上的下载页面有跳转,直接用wget下载下来的只是html页面.可以用下面的命令: wget --no-cookies --no-check-certificate ...

  7. Linux路径名和文件名最大长度限制

    UNIX标准对路径名和文件名最大长度限制做出了说明,但其上限值在实际应用长过小,Linux在具体实现时提升了该上限,该限制在Linux的 /usr/include/linux/limits.h 中做出 ...

  8. linux可运行的shell脚本与设置开机服务启动(自己总结)

    完整的ln命令参考:http://www.runoob.com/linux/linux-comm-ln.html ln :创建连接文件 - 默认创建的是硬连接,好比复制 ,但是两个文件会同步 命令:l ...

  9. qt 零星笔记

    1.qt中堆栈对象的销毁 名字不对,我不知道该取个什么名字,暂且这样吧 在linux c编程中谈到过进程的内存映像,一个进程在内存中的映像如下

  10. torch.normal(means, std, out=None)

    返回满足正态分布的张量 means和std分别给出均值和标准差