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 ...
随机推荐
- JS 数组 foreach 和 map
本文地址:http://www.cnblogs.com/veinyin/p/8794677.html foreach 和 map 都是数组的迭代方法,对数组的每一项执行给定函数,不会改变原数组. 两 ...
- Anaconda+django写出第一个web app（一）
在安装好Anaconda和django之后,我们就可以开始创建自己的第一个Web app,那么首先创建一个空文件夹,之后创建的文件都在这个文件夹内. 启动命令行进入此文件夹内,可以先通过如下命令查看一 ...
- asp.net 调用post方法并获取返回值
/// <summary> /// http协议 post数据 接受返回结果 /// </summary> /// <param ...
- 2018ICPC青岛赛区J题
题目链接:http://acm.zju.edu.cn/onlinejudge/showRuns.do?contestId=1 这题真的坑,为什么要买0本书的时候,书架里面刚好有价格为0的时候输出&qu ...
- 文件操作fstream
c++文件操作详解 2009-04-16 20:46:35| 分类: C/C++|举报|字号 订阅 C++ 通过以下几个类支持文件的输入输出: ofstream: 写操作(输出)的文件类 (由ost ...
- [转]caffe中solver.prototxt参数说明
https://www.cnblogs.com/denny402/p/5074049.html solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是so ...
- JS简介——（一）
0.结构
- 【工具记录】Linux口令破解
1.基础知识 /etc/passwd:记录着用户的基本属性,所有用户可读 字段含义如下: 用户名:口令:用户标识号:组标识号:注释性描述:主目录:登录Shell eg: root:x:0:0:root ...
- p,br,hn,b,i,u,s,sup,sub标签
<!-- -->注释 <p></p>段落标签 <br />换行标签 <h1></h1> 字体标签 最大 <h6> ...
- centos7 部署 seafile
=============================================== 2018/5/13_第1次修改 ccb_warlock == ...