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 ...
随机推荐
- 八卦Minsky打压神经网络始末
八卦Minsky打压神经网络始末 谈下Minsky造成的神经网络冰河事件:57年一个叫弗兰克的大概只有二流水平的学者搞出了感知机,理论和实践证明了对线性可分问题的有效性,引起一阵轰动,特别是非科学圈类 ...
- jQuery中的text(),html(),val()的区别
一.jquery中HTML 1. 无参html() 方法用来获取任意元素的HTML内容,如果你调用多个选定元素的.html()方法,那么其读取的只是第一个元素,换句话说:如果选择器匹配多于一个的元素, ...
- KMP初探·总结
昨天自己乱搞了一天kmp之后终于弄懂了kmp 的基本原理. 早上看见了好多只讲原理和数学公式推导的博客,感觉很坑,无法理解.后来找到了一篇图文并茂的博客,感觉很快就理解了. KMP的精髓在于n ...
- CF 1008C Reorder the Array
You are given an array of integers. Vasya can permute (change order) its integers. He wants to do it ...
- 【leetcode 简单】 第七十八题 Nim游戏
你和你的朋友,两个人一起玩 Nim游戏:桌子上有一堆石头,每次你们轮流拿掉 1 - 3 块石头. 拿掉最后一块石头的人就是获胜者.你作为先手. 你们是聪明人,每一步都是最优解. 编写一个函数,来判断你 ...
- HDU 1561 The more, The Better (有依赖背包 || 树形DP)
题目链接 Problem Description ACboy很喜欢玩一种战略游戏,在一个地图上,有N座城堡,每座城堡都有一定的宝物,在每次游戏中ACboy允许攻克M个城堡并获得里面的宝物.但由于地理位 ...
- Django rest framwork-CMDB API实战
一.序列化 serializers.py from rest_framework import serializers from web_manage import models class Asse ...
- Python time()方法
from:http://www.runoob.com/python/att-time-time.html 描述 Python time time() 返回当前时间的时间戳(1970纪元后经过的浮点秒数 ...
- python并发爬虫利器tomorrow(一)
tomorrow是我最近在用的一个爬虫利器,该模块属于第三方的一个模块,使用起来非常的方便,只需要用其中的threads方法作为装饰器去修饰一个普通的函数,既可以达到并发的效果,本篇将用实例来展示to ...
- c语言格式控制符
http://zhidao.baidu.com/link?url=-YJjz3U0fd_eSW9eLa8ankGo_QbyOOOaKYWyAY9g4mKWQj0DN6l12OSLJz24U8jCwo1 ...