react基础语法（四） state学习
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head> <body>
<div id="app"> </div>
<script type="text/babel">
//React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）
//自顶向下或单向数据流 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI只能影响树中下方的组件
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
num:10
};//定义一个初始state
console.log(this.state,'state')
}
//在组件输出到 DOM 后会执行 componentDidMount()钩子 在第一次渲染后调用，只在客户端。
//之后组件已经生成了对应的DOM结构;可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作;
componentDidMount() {
console.log('挂载')
this.timerID = setInterval(
() => self.tick(),
1000
);
//转成普通函数式
// let that = this; //that 组件类 Clock的this;
// this.timerID = setInterval(function () {
// return that.tick();
// },1000);
}
//一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount()这个钩子函数，定时器也就会被清除;
//在组件从 DOM 中移除之前立刻被调用。
componentWillUnmount() {
console.log('卸载')
clearInterval(this.timerID);
}
//setState() 来调度UI更新
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, react!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
<h2>数字加 {this.state.num + 10 + 'string'}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('app')
);
</script>
</body> </html>
react基础语法（四） state学习的更多相关文章
- react基础语法（五） state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- Python 基础语法(四)
Python 基础语法(四) --------------------------------------------接 Python 基础语法(三)------------------------- ...
- react基础篇四
列表 & Keys 渲染多个组件 你可以通过使用{}在JSX内构建一个元素集合 下面,我们使用Javascript中的map()方法遍历numbers数组.对数组中的每个元素返回<li& ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- react 基础语法复习3- 数据传递 & 数据变化(props&&state)
react当中的数据传递是通过 props以及 state来实现的 props <Header name="kugeliu" /> Header组件当中有个name属性 ...
- react基础语法二
这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...
- react 基础语法使用
刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记. 包括: 渲染元素 组件(函数方法定义.es6 class定义) 事件处理 条件渲染 列表 下面代码部分将不会再写html部分 ...
- 从零开始学 Web 之 ES6（六）ES6基础语法四
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- react 基础语法复习2- react入门以及JSX
引入 react 以及 ReactDom import React from 'react'; import ReactDOM from 'react-dom'; 将react组件渲染到真实dom节点 ...
随机推荐
- I.MX6 U-boot imxotp MAC address 写入
/***************************************************************************** * I.MX6 U-boot imxotp ...
- Watir: 当出现错误提示AutoItX3.dll 没有注册的时候，该怎么处理？
对于Ruby 1.8版本,以管理员身份运行命令行窗口,输入Regsvr32 AutoItX3.dll路径即可.对于1.9 版本,路径与1.8版本是不同的,我们可以进入Ruby安装目录下,搜索AutoI ...
- HDU 1995 汉诺塔V (水题)
题意:.. 析:2^n-i 代码如下: #pragma comment(linker, "/STACK:1024000000,1024000000") #include <c ...
- cardboard sdk for unity 系统分析 - 属性行为分析CardBoard类
一.CardBoard类是个单例类,全局只有一个CardBoard对像且在需要时才生成: CardBoard中主要使用了BaseVRDevice device这个对像,而这个对像也是单例类BaseVR ...
- sourceTree 的使用
一.拉取其他分支代码 1.git clone 代码是下载master分支 2.在未做修改的情况下,合并分支 二.提交代码到其他分支 1.创建分支(名称可以与远程不同) 2.(正常提交步骤)将作出的修改 ...
- 洛谷 - P2945 - 沙堡Sand Castle - 排序
https://www.luogu.org/problemnew/show/P2945 好像猜一猜就觉得排序之后是最优的,懒得证明了.每个城墙向他最接近的城墙靠近,绝对是最优的.
- 2016 Multi-University Training Contest 1Abandoned country
qaq,现在内心真是各种草泥马.怪自己见识短浅...哎... 题意: 给你一幅图,然后求一个最小花费使得所有的点都连通(这就是最小生成树啊),然后在这棵树上[如果我要从任意起点到任意终点,这两个点不同 ...
- AT2534 港湾設備 (Port Facility)
洛谷 先膜一下Iscream巨巨 首先我们可以把题目转化为线段覆盖,如果两条线段相交(不算某一条完全在另一条里面的情况),那么这两条线段代表的集装箱就不能放到同一个栈里,我们在它们之间连一条边.如果图 ...
- 纯JS实现鼠标每隔一段时间才能让页面再次滚动
这里没有用到浏览器的兼容性写法,只是提供思路(这里使用的是Google浏览器的方法) javascript代码部分: //获取html元素var oHtml =document.documentEle ...
- 第八篇 .NET高级技术之字符串暂存池（缓冲池）
字符串不可变性,字符串的‘暂存池’两个特性 字符串是引用类型,程序中会存在大量的字符串对象,如果每次都创建一个字符串对象,会比较浪费内存.性能低,因此CLR做了“暂存池”(拘留池,缓冲池,暂存池),在 ...