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 ...
随机推荐
- spring-boot添加自定义拦截器
spring-boot中的WebMvcConfigurerAdapter类提供了很多自定义操作的方法,先贴出来大家看看 package org.springframework.web.servlet. ...
- Python入门系列教程（二）字符串
字符串 1.字符串输出 name = 'xiaoming' print("姓名:%s"%name) 2.字符串输入 userName = raw_input('请输入用户名:') ...
- fvwm：还是觉得你最好
2008-07-12的老日志 用了gnome和xfce,还是有些厌了,摆弄了两天fvwm,发现虽然配置起来有点麻烦,但用起来还是它最贴心,而且占资源极少,系统使用过程中内存一直只用了五六十兆.我的鼠标 ...
- [Ubuntu 14.04] 安装Flash && 安装QQ
一.安装Flash 打开Firefox浏览器弹出的Flash安装提醒早都烦死了,那么Ubuntu14.04怎么安装Flash呢? 1.32位系统命令行安装: 第一步 更新库: sudo apt-get ...
- 3 - django-template模板基本使用
目录 1 Template 1.1 模板的基础使用 1.1.1 变量 1.1.2 注释标签 1.1.3 深度查询 1.1.4 内置变量过滤器filter 1.1.5 自定义过滤器之filter 1.1 ...
- Vagrant 无法校验手动下载的 Homestead Box 版本
起因 4年前电脑,配置不太好了,现有的 Homestead 运行起来太吃内存.在修改了 Homestead.yaml 文件里 memory 选项的内存配置为 1024 后,应用最新配置重启失败. 索性 ...
- Python Challenge 第 2 关攻略：ocr
text="那一大推乱码" 方案1 from collections import Counter print(Counter(text)) 方案2 import string & ...
- MVC 视图页对数字，金额 用逗号 隔开（数字格式化）
cshtml页面代码: <tr> <th>@Model.BankName</th> <th>@Model.Month</th> <th ...
- [NOI2007]货币兑换 「CDQ分治实现斜率优化」
首先每次买卖一定是在某天 $k$ 以当时的最大收入买入,再到第 $i$ 天卖出,那么易得方程: $$f_i = \max \{\frac{A_iRate_kf_k}{A_kRate_k + B_k} ...
- github 优秀的开源项目
https://github.com/wlcaption/AndroidMarket---- 这是手机应用商店,包含应用的下载,用户中心等内容 https://github.com/wlcaption ...