一宴胧、創(chuàng)建工程
在官網(wǎng)的教程中,要使用react創(chuàng)建工程需要執(zhí)行命令：
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
這些命令會(huì)幫我們生成一系列工程需要的插件膘婶，ES6的語(yǔ)法新特性：模塊化編程，很多瀏覽器不支持，我們需要這些工具轉(zhuǎn)化成es5继薛。
執(zhí)行npm start 在瀏覽器會(huì)出現(xiàn)一個(gè)初始的工程頁(yè)面，然后導(dǎo)入到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 {
//在構(gòu)造中初始化state值
constructor(props) {
super(props);
//此處不能用setState();
this.state = {
time: 0,
on: false,
log: []
}
}
// handleClick() {
// //注意這里的'this'對(duì)象愈捅，由于handleClick方法是傳遞到了Button中所以如果直接用this,拿到的
// //就是Button對(duì)象遏考，報(bào)錯(cuò)：time屬性沒(méi)有定義，這時(shí)候我們就需要使用bind函數(shù)
// setInterval(()=>this.setState({time:++this.state.time}),10);
//
// //還有一種寫(xiě)法：
// // setInterval(function () {
// // this.setState({time:++this.state.time});
// // console.log(this.state.time);
// // }.bind(this),10);
// }
// 上面方式button的實(shí)現(xiàn)代碼：<Button className="success" text="開(kāi)始" onClick={this.handleClick.bind(this)}/>
//或者都用箭頭函數(shù)實(shí)現(xiàn),箭頭函數(shù)的作用域是：寫(xiě)在哪里蓝谨，this就表示哪里
handleClick = () => {
if (this.state.on) {
clearInterval(this.timer);
} else {
//計(jì)時(shí)器
this.timer = setInterval(() => {
this.setState({time: ++this.state.time})
}, 10)
}
//改變開(kāi)始诈皿、暫停狀態(tài)
this.setState({on: !this.state.on})
}
//記錄時(shí)間,用數(shù)組把當(dāng)前的時(shí)間記錄下來(lái)
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 ? '暫停' : '開(kāi)始';
var time = formateTime(this.state.time);
// /*這里需要把當(dāng)前組件的對(duì)象傳遞進(jìn)去*/
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>
}
//監(jiān)聽(tīng)鍵盤(pán)的事件
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
}
})
}
}
//導(dǎo)出，在文件外面使用這個(gè)類
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
涉及和需要注意的知識(shí)點(diǎn)：
- 當(dāng)導(dǎo)入（import xxxx）的組件有相同名字的時(shí)候可以取別名：{import A as B}
- JSX語(yǔ)法它是支持javascript語(yǔ)法的,在es6中因?yàn)閏lass是個(gè)關(guān)鍵字所以像棘，在聲明，標(biāo)簽屬性的時(shí)候class要改為className,虛擬DOM會(huì)自動(dòng)解析壶冒。:
<h1 className="time_displayer">00:00:16.00</h1>
- className 如果需要用類標(biāo)簽設(shè)置多個(gè)style的話用空格隔開(kāi)缕题，而且后面的style屬性會(huì)覆蓋前面的屬性
<button className="button success">開(kāi)始</button>
- .log > .empty_log -->empty_log使用這個(gè)樣式 ，.log .empty_log都會(huì)使用這個(gè)樣式
- javaScript創(chuàng)建數(shù)組最常見(jiàn)的方式：
var a =[] 和 var arr = new Array();
在數(shù)組末尾添加元素： arr.push();
arr.map(function(item,i))來(lái)遍歷數(shù)組
var arr = [1,3,4]
arr.map(function (item,i) {
return ++item;//可以返回任意類型胖腾，賦值給一個(gè)新的數(shù)組
})
console.log(arr);
//輸出：[ 1, 3, 4 ]
var a = arr.map((item,i)=>++item)
console.log(a);
//輸出：[ 2, 4, 5 ]
- list-style: none;//去掉列表默認(rèn)樣式
- 偽類：
.className:xxx 值有：
hover——鼠標(biāo)移到標(biāo)簽的屬性烟零；
visited——鏈接點(diǎn)擊后的顏色 - css3 的陰影
box-shadow: 0 0 25px rgba(0,0,0,0.2);
