一、创建工程
在官网的教程中,要使用react创建工程需要执行命令：
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
这些命令会帮我们生成一系列工程需要的插件，ES6的语法新特性：模块化编程，很多浏览器不支持，我们需要这些工具转化成es5。
执行npm start 在浏览器会出现一个初始的工程页面，然后导入到webstrom,
TimeDisplay.js 代码：
import React, {Component} from 'react';
import DisplayLog from './DiaplayLog';
import Button from './Button';
import formateTime from '../utils/formateTime'
class TimeDisplay extends Component {
//在构造中初始化state值
constructor(props) {
super(props);
//此处不能用setState();
this.state = {
time: 0,
on: false,
log: []
}
}
// handleClick() {
// //注意这里的'this'对象，由于handleClick方法是传递到了Button中所以如果直接用this,拿到的
// //就是Button对象，报错：time属性没有定义，这时候我们就需要使用bind函数
// setInterval(()=>this.setState({time:++this.state.time}),10);
//
// //还有一种写法：
// // setInterval(function () {
// // this.setState({time:++this.state.time});
// // console.log(this.state.time);
// // }.bind(this),10);
// }
// 上面方式button的实现代码：<Button className="success" text="开始" onClick={this.handleClick.bind(this)}/>
//或者都用箭头函数实现,箭头函数的作用域是：写在哪里，this就表示哪里
handleClick = () => {
if (this.state.on) {
clearInterval(this.timer);
} else {
//计时器
this.timer = setInterval(() => {
this.setState({time: ++this.state.time})
}, 10)
}
//改变开始、暂停状态
this.setState({on: !this.state.on})
}
//记录时间,用数组把当前的时间记录下来
handlelogTime = () => {
this.state.log.push(this.state.time);
// console.log(this.state.time);
}
//清空
handlelClear = () => {
this.setState({log:[]})
}
//重置
handleReset = ()=> {
this.setState({time:0});
}
render() {
var text = this.state.on ? '暂停' : '开始';
var time = formateTime(this.state.time);
// /*这里需要把当前组件的对象传递进去*/
return <div>
<h1 className="time_displayer">{time}</h1>
<div className="controler">
<Button className={this.state.on ? "danger":"success"} text={text} onClick={this.handleClick}/>
<Button className="warning" text="重置" onClick={this.handleReset}/>
<Button className="primary" text="记录" onClick={this.handlelogTime}/>
<Button className="undefined" text="清空" onClick={this.handlelClear}/>
</div>
<DisplayLog log={this.state.log}/>
</div>
}
//监听键盘的事件
componentDidMount() {
window.addEventListener('keydowm',e=>e.preventDefault())
window.addEventListener('keyup',e=>{
e.preventDefault();
switch (e.keyCode) {
case 32://space
this.handleClick();
break
case 82://重置
this.handleReset();
break
case 13:
this.handlelogTime();
break
case 67:
this.handlelClear()
break
}
})
}
}
//导出，在文件外面使用这个类
export default TimeDisplay;
DisplayLog.js 代码：
export default class DisplayLog extends Component {
renderEmpty = ()=>{
return <span className="empty_log">空空如也</span>;
}
renderLog = ()=>{
return this.props.log.map((item,i) => {
return <li className="log_item">{formateTime(item)}</li>
});
}
render() {
const log = this.props.log.length === 0 ? this.renderEmpty() : this.renderLog();
return <ul className="log">
{log}
</ul>
}
}
formateTime.js 代码
export default function (t = 0) {
const msec = appendZero(Number.parseInt(t % 100)),
sec = appendZero(Number.parseInt(t/100%60)),
min = appendZero(Number.parseInt(t/6000%60)),
hour = appendZero(Number.parseInt(t/360000));
return `${hour}:${min}:${sec}.${msec}`;
}
const appendZero = n=>n.toLocaleString({},{minimumIntegerDigits:2});
1.gif
涉及和需要注意的知识点：
- 当导入（import xxxx）的组件有相同名字的时候可以取别名：{import A as B}
- JSX语法它是支持javascript语法的,在es6中因为class是个关键字所以，在声明，标签属性的时候class要改为className,虚拟DOM会自动解析。:
<h1 className="time_displayer">00:00:16.00</h1>
- className 如果需要用类标签设置多个style的话用空格隔开，而且后面的style属性会覆盖前面的属性
<button className="button success">开始</button>
- .log > .empty_log -->empty_log使用这个样式 ，.log .empty_log都会使用这个样式
- javaScript创建数组最常见的方式：
var a =[] 和 var arr = new Array();
在数组末尾添加元素： arr.push();
arr.map(function(item,i))来遍历数组
var arr = [1,3,4]
arr.map(function (item,i) {
return ++item;//可以返回任意类型，赋值给一个新的数组
})
console.log(arr);
//输出：[ 1, 3, 4 ]
var a = arr.map((item,i)=>++item)
console.log(a);
//输出：[ 2, 4, 5 ]
- list-style: none;//去掉列表默认样式
- 伪类：
.className:xxx 值有：
hover——鼠标移到标签的属性；
visited——链接点击后的颜色 - css3 的阴影
box-shadow: 0 0 25px rgba(0,0,0,0.2);
