<!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">

function FormattedDate(props) {

  return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;

}

class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {date: new Date()};

  }

  componentDidMount() {

    this.timerID = setInterval(

      () => this.tick(),

      1000

    );

  }

  componentWillUnmount() {

    clearInterval(this.timerID);

  }

  tick() {

    this.setState({

      date: new Date()

    });

  }

  render() {

    return (

      <div>

        <h1>Hello, Zzw ReactState 数据自顶向下流动!</h1>

        <h2>父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。

这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。

以下实例中 FormattedDate 组件将在其属性中接收到 date 值，并且不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入：</h2>

        <FormattedDate date={this.state.date} />

      </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(状态)-将生命周期方法添加到类中

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

  4. react篇章-React State(状态)

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

  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. JavaScript 数组元素排序

    var sortArray = new Array(3,6,8888,66); // 元素必须是数字 sortArray.sort(function(a,b){return a-b}); // a-b ...

  2. HTML面试基础问题

    1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义?   1)<!DICTYPE>声明位于文档中的最前面,处于<html>标签之前,告诉浏览器的解析器,用什么文档 ...

  3. Web API: Client: HttpClient Message Handlers

    原文地址: http://www.asp.net/web-api/overview/web-api-clients/httpclient-message-handlers using System; ...

  4. 【Codeforces858F】Wizard's Tour [构造]

    Wizard's Tour Time Limit: 50 Sec  Memory Limit: 512 MB Description Input Output Sample Input 4 5 1 2 ...

  5. HDU 1019 Least Common Multiple GCD

    解题报告:求多个数的最小公倍数,其实还是一样,只需要一个一个求就行了,先将答案初始化为1,然后让这个数依次跟其他的每个数进行求最小公倍数,最后求出来的就是所有的数的最小公倍数.也就是多次GCD． #i ...

  6. Oracle嵌套表

    一.介绍  1.定义 嵌套表是表中之表.一个嵌套表是某些行的集合,它在主表中表示为其中的一列.对主表中的每一条记录,嵌套表可以包含多个行.在某种意义上,它是在一个表中存储一对多关系的一种方法.    ...

  7. datatable表格框架服务器端分页查询设置

    更多内容推荐微信公众号,欢迎关注: js代码如下: $('#mytable').dataTable( { "bServerSide": true, //开启服务器模式,使用服务器端 ...

  8. IIS8.0 配置应用程序初始化功能

    IIS进程回收后,第一次访问会超级慢,这对于用户是不能接受的,怎么解决这个问题? 我们不能设置IIS不回收进程,因为这样可能会导致IIS内存泄漏.有效的方法时,尽量在业务空闲时间回收进程,回收后立刻预 ...

  9. Virut样本取证特征

    1.网络特征 ant.trenz.pl ilo.brenz.pl 2.文件特征 通过对文件的定位,使用PEID查看文件区段,如果条件符合增加了7个随机字符区段的文件,则判定为受感染文件. 3.受感染特 ...

  10. python进阶之类常用魔法方法和魔法属性

    前言 前面我们总结过了python的关键字.运算符.内置函数.语法糖等与python魔法方法之间的关系,现在我们更细一点,看看python的面向对象编程有哪些常用的魔法属性和魔法方法. 魔法属性 对于 ...