React案例：计时器

一、创建工程

在官网的教程中,要使用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);