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 ...
随机推荐
- 100 Most Popular Machine Learning Video Talks
100 Most Popular Machine Learning Video Talks 26971 views, 1:00:45, Gaussian Process Basics, David ...
- sql 存储时空格转成问号问题
最近做系统,从邮件中导出邮件,上传到系统中,遇到一个奇葩的问题,如下: 通过本地文件看,文件名中是一个空格,上传至数据库后,展示就变成了问号,究其原因,发现是一个特殊字符导致: 最近认真去查了一下这个 ...
- 七、Kafka 用户日志上报实时统计之编码实践
一.数据生产实现 1.配置数据生产模块 项目基础配置所包含的内容,如下所示: •项目工程的文件配置 •集群连接信息配置 •开发演示 2.实现 Flume 到 Kafka 模块 实现 Flume 到 K ...
- 推荐一本springBoot学习书籍---深入浅出springBoot2.x
花了几周时间读完了这本书,确实是一本特别详细全面的书,而且不单单只是springBoot, 书中还介绍了许多工作中常用的技术与springBoot的整合使用,当然,也有一些小bug, 因为在代码实践过 ...
- Shell-判断条件总结
-b file 若文件存在且是一个块特殊文件,则为真 -c file 若文件存在且是一个字符特殊文件,则为真 -d file 若文件存在且是一个目录,则为真 -e file 若文件存在,则为真 -f ...
- 企业日志大数据分析系统ELK+KAFKA实现【转】
背景: 最近线上上了ELK,但是只用了一台Redis在中间作为消息队列,以减轻前端es集群的压力,Redis的集群解决方案暂时没有接触过,并且Redis作为消息队列并不是它的强项:所以最近将Redis ...
- MAVLink v1.0详解——结构
本文针对 MAVLink v1.0版本,协议版本:3. MAVLink是为微型飞行器MAV(Micro Air Vehicle)设计的(LGPL)开源的通讯协议.是无人飞行器和地面站(Ground C ...
- 线性表应用－－Josephus问题的解法（Python 版）
线性表应用 --Josephus问题的解法(Python 版) Josephus问题描述:假设有n个人围坐一圈,现在要求从第k个人开始报数,报到第m个数的人退出.然后从下一个人开始继续报数并按照相同的 ...
- lumen 在AppServiceProvider 使用Illuminate\Support\Facades\Redis 报错
这里需要注意 bootstrap/app.php中AppServiceProvider 和RedisServiceProvider 注入的先后顺序
- InnoDB锁问题
InnoDB锁问题 InnoDB与MyISAM的最大不同有两点:一是支持事务(TRANSACTION):二是采用了行级锁.行级锁与表级锁本来就有许多不同之处,另外,事务的引入也带来了一些新问题.下面我 ...