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 ...
随机推荐
- How to Tell Science Stories with Maps
Reported Features How to Tell Science Stories with Maps August 25, 2015 Greg Miller This map, part ...
- 《C语言程序设计基础I》秋季学习总结
希望下学期比这学期轻松,学习能力上升,只是越发丰富. 一步一步的走踏实了
- POJ 1128 Frame Stacking (拓扑排序)
题目链接 Description Consider the following 5 picture frames placed on an 9 x 8 array. ........ ........ ...
- 49、多线程创建的三种方式之继承Thread类
继承Thread类创建线程 在java里面,开发者可以创建线程,这样在程序执行过程中,如果CPU空闲了,就会执行线程中的内容. 使用Thread创建线程的步骤: 1.自定义一个类,继承java.lan ...
- Servlet笔记5--设置欢迎页面及HTTP状态码404、500
欢迎页面: 代码详解: web.xml配置文件: <?xml version="1.0" encoding="UTF-8"?> <web-ap ...
- from setuptools import setup ImportError: No module named setuptools【转】
转自:http://www.cnblogs.com/chinacloud/archive/2010/12/24/1915644.html from setuptools import setupImp ...
- 从此编写 Bash 脚本不再难【转】
从此编写 Bash 脚本不再难 原创 Linux技术 2017-05-02 14:30 在这篇文章中,我们会介绍如何通过使用 bash-support vim 插件将 Vim 编辑器安装和配置 为一个 ...
- Mac 升级一次，php 就崩溃一次，有味，苹果....
Mac升级系统macOS Sierra后PHP不编译 Mac下搭建PHP开发环境(Apache+PHP+MySQL+phpMyAdmin),当Mac 从OS 10.11升级至macOS Sierra( ...
- JS动态创建元素（两种方法）
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- asterisk控制台取消NOTICE信息
中道拨号方案取消了控制台输出的NOTICE信息: 方法:vim /etc/asterisk/logger.conf;console => notice,warning,error把上面这行取消 ...