react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>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, world!</h1>
<FormattedDate date={this.state.date} />
</div>
);
}
} function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
} function AppZzw() {
return (
<div>
<Clock/>
<Clock/>
<Clock/> </div>
);
} ReactDOM.render(<AppZzw />, document.getElementById('example'));
</script> </body>
</html>
所有组件都是真正隔离的
我们可以在有状态组件中使用无状态组件，也可以在无状态组件中使用有状态组件。
react篇章-React State(状态)-组件都是真正隔离的的更多相关文章
- react篇章-React State(状态)-数据自顶向下流动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react的redux无状态组件
Provider功能主要为以下两点: 在原应用组件上包裹一层,使原来整个应用成为Provider的子组件 接收Redux的store作为props,通过context对象传递给子孙组件上的connec ...
- react篇章-React Props
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...
- react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
- react篇章-React State(状态)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 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 ...
随机推荐
- 【BZOJ】1828: [Usaco2010 Mar]balloc 农场分配（经典贪心）
[算法]贪心+线段树 [题意]给定n个数字ci,m个区间[a,b](1<=a,b<=10^5),每个位置最多被ci个区间覆盖,求最多选择多少区间. 附加退化问题:全部ci=1,即求最多的不 ...
- Multidimensional Queries（二进制枚举+线段树+Educational Codeforces Round 56 (Rated for Div. 2)）
题目链接: https://codeforces.com/contest/1093/problem/G 题目: 题意: 在k维空间中有n个点,每次给你两种操作,一种是将某一个点的坐标改为另一个坐标,一 ...
- Mysql服务优化
Mysql服务优化 Mysql服务加速优化的6个阶段 硬件层面优化 操作系统层面优化 Mysql数据库层面优化 网站集群架构层面优化 安全优化 流程.制度控制优化 1.硬件层面优化 CPU ...
- Nginx配置location及rewrite规则
Nginx配置location及rewrite规则 示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } loca ...
- 系统学习（javascript）_基础（数据类型一）
五种基本数据类型:Number,String,Boolean,Null,Undefind: 三种引用数据类型:Object,Array,Symbol: Symbol为ECMAScript6新增的数据类 ...
- 差分约束系统 + spfa（A - Layout POJ - 3169）
题目链接:https://cn.vjudge.net/contest/276233#problem/A 差分约束系统,假设当前有三个不等式 x- y <=t1 y-z<=t2 x-z< ...
- 2016.07.15——istringstream测试
istringstream测试 1.istringstream strcin(str),字符串(str)可以包括多个单词,单词之间使用空格分开 #include "stdafx.h" ...
- 命名实体识别(NER)
一.任务 Named Entity Recognition,简称NER.主要用于提取时间.地点.人物.组织机构名. 二.应用 知识图谱.情感分析.机器翻译.对话问答系统都有应用.比如,需要利用命名实体 ...
- Strusts2笔记5--数据验证
数据验证: 输入验证分为客户端验证与服务器端验证.客户端验证主要通过JavaScript脚本进行,而服务器端验证主要是通过Java代码进行验证. 分为以下四种情况: (1)手工编写代码,对Action ...
- 配置虚拟机时间使其与国内时间同步，linux时间 ntp
设置系统时间 [root@node2 ~]# date -s "10/30/18 09:30:00"Tue Oct 30 09:30:00 PDT 2018[root@node2 ...