react篇章-React State(状态)-数据自顶向下流动
<!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(状态)-数据自顶向下流动的更多相关文章
- react篇章-React Props
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...
- react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
- react篇章-React State(状态)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React Props-Props 验证
React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...
- react篇章-React 组件-复合组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-向组件传递参数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-ES6 class 来定义一个组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- React篇章-React 组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
随机推荐
- 《设计模式》-原则三：依赖倒置原则（DIP）
这几天晚上回来都去玩了!没有坚持学习.真的好惭愧! 非常自责 后面一定要坚持 一气呵成 争取每天学一点,把这个学完. 今天主要是看了一下 设计模式中的 原则三: 依赖倒置原则(DIP) 官方是这样 ...
- java与Excel (.xls文件) ---使用JXL创建,增添表格文件
由于一些原因要搞一下excel文件,个人感觉poi太难,所以用了JXL(感觉比较简单). 1.添加外部归档 jxl.jar 2. /** 生成的xls文件第一次需要手动选择EXCEL打开* * */ ...
- POJ 3468 A Simple Problem with Integers （区间更新+区间查询）
题目链接 Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operation ...
- HDU 1556 Color the ball （树状数组 区间更新+单点查询）
题目链接 Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的"小飞鸽&quo ...
- Linux基础-网络配置
任务目标:临时配置网络ip,网关,DNS,然后重启network:写配置文件永久保存网络配置 临时配置ens33网卡IP地址为192.168.30.99,查看更改完的ifconfig信息: 重新启动n ...
- 【SVN】centos环境下搭建SVN服务器
1.安装SVN,有些linux发行版自带SVN,可以用下面方法检测是否安装SVN. svn --version 如果 Subversion 客户端没有安装,命令将报告svn命令找不到的错误. 我们可以 ...
- SPI子系统分析之二:数据结构【转】
转自:http://www.cnblogs.com/jason-lu/articles/3164901.html 内核版本:3.9.5 spi_master struct spi_master用来描述 ...
- inspect的使用
# -*- coding: utf-8 -*- # @Time : 2018/9/11 10:29 # @Author : cxa # @File : inspecttest.py # @Softwa ...
- Ubuntu_搜狗输入法安装
前言 由于很少使用Linux系统,所以闲下来打算看一看,在安装完成后,遇到无法输入中文的问题.我使用的是小鹤双拼,所以习惯使用搜狗输入法,本文记录一下如何在ubuntu系统下安装小鹤双拼 由于前两次并 ...
- 16/11/22_plsql
1.数据类型: char 固定长度,varchar 字符长度按照实际长度, varchar2 字符均存储2个字节, nvarchar 按照Unicode存储.number(m,n)总长度m,小数 n. ...