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 ...
随机推荐
- Error: Target id is not valid ABIs: no ABIs 解决方法
问题展示: 没有ABI(Application Binary Interface)应用程序二进制接口 解决方法: 因为Android4.0以上版本Android SDK 初始安装时是不带ABIs的, ...
- 正则表达式 grep文本查询 sed流处理 应用
一.正则表达: ^:以什么什么开头,^a:以a字符开头 $:以什么什么结尾,b$:以b字符结尾 *:左边字符0-无穷个 +:左边字符1-无穷个 .:代表单字符 ?:前导字符为零个或1个 {n}:左面字 ...
- 一个MMORPG的常规技能系统
广义的的说,和战斗结算相关的内容都算技能系统,包括技能信息管理.技能调用接口.技能目标查找.技能表现.技能结算.技能创生体(buff/法术场/弹道)管理,此外还涉及的模块包括:AI模块(技能调用者). ...
- HDU 2102 A计划 （深搜）
题目链接 Problem Description 可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主 ...
- PHP在Linux下Apache环境中执行exec，system，passthru等服务器命令函数
更多内容推荐微信公众号,欢迎关注: 若在服务器中使用php test.php运行exec,system,passthru等命令相关的脚本能成功运行,在web页面却没反应, [可能是服务器端,PHP脚本 ...
- C++的各种初始化方式
C++小实验测试:下面程序中main函数里a.a和b.b的输出值是多少? #include <iostream> struct foo { foo() = default; int a; ...
- 读后感+资源-----java8函数式编程pdf
花了两周时间工作之余抽空读完了这本书,对lamdba以及java的理解又有了一个新的认识(装个逼,哈哈) 以前看视频学习的还是太基本了,感觉读书更容易理解背后的设计思想和编程思路 这本书还是挺不错,就 ...
- linux sigaction 函数 用法释义
使用 sigaction 函数: signal 函数的使用方法简单,但并不属于 POSIX 标准,在各类 UNIX 平台上的实现不尽相同,因此其用途受 到了一定的限制.而 POSIX 标准定义的信号处 ...
- 一步一步搭建oracle 11gR2 rac+dg之环境准备(二)【转】
一步一步在RHEL6.5+VMware Workstation 10上搭建 oracle 11gR2 rac + dg 之环境准备 (二) 一步一步搭建oracle 11gR2 rac+dg之环境准备 ...
- C#基础学习之FileStream
FileStream和File的区别 后者比前者给内存带来压力大. FileStream可以操作字节也就是可以保存任何类型的文件. 1.FileStream读文件操作 //OpenOrCreate: ...