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 ...
随机推荐
- Postman简明教程
一.Postman简介 Postman是一款接口测试工具,常用于日常工作的接口类功能测试和简单的自动化测试. 二.Postman功能介绍 1.常见get请求的接口测试 我们现在有这样一个获取学生信息的 ...
- js小记 unicode 编码解析
var str = "\\u6211\\u662Funicode\\u7F16\\u7801"; // 关于这样的数据转换为中文问题,常用的两种方法. // 1. eval 解析 ...
- Grep学习笔记
Grep(Global search Regular Expression and Print out the line)是一种强大的文本搜索工具. 1. 正则表达式的基本组成部分 正则表达式 描述 ...
- 【BZOJ】2434: [Noi2011]阿狸的打字机 AC自动机+树状数组+DFS序
[题意]阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的: l 输入小写 ...
- php魔术函数 __clone()
原文地址: http://www.nowamagic.net/librarys/posts/php/32 PHP4面向对象功能一个很大的缺点,是将对象视为另一种数据类型,这使得很多常见的OOP方法无法 ...
- 简单对象List自定义属性排序
<body> <div> sort()对数组排序,不开辟新的内存,对原有数组元素进行调换 </div> <div id="showBox" ...
- golang的json序列化
json就是简单的数据交换格式,语法类似javascript的对象和列表,是最常见的后端和运行在网页上的js之间的通信格式. encoding: 编码json数据需要使用到Marshal()函数. f ...
- 7 SQL优化技术
7.1 改变访问结构 7.2 修改SQL语句 SELECT deptno FROM dept WHERE deptno NOT IN (SELECT deptno FROM emp); SELEC ...
- SqlServer存储过程（增删改查）
* IDENT_CURRENT 返回为任何会话和任何作用域中的特定表最后生成的标识值. CREATE PROCEDURE [dbo].[PR_NewsAffiche_AddNewsEntity] ( ...
- 去除TFS版本控制
对于曾经做过TFS版本控制的项目,在版本控制服务不可用的时候,依然会在每次打开项目的时候都提示:当前项目是版本控制的项目,但是当前版本控制不可用,balabala的信息,如果是需要进行版本控制的项目在 ...