Plan | Done | Mark |
---|---|---|
【任務(wù)】所有靜態(tài)頁面 | DONE | 接口也基本對(duì)接完畢,但是模板還需要修改 |
【學(xué)習(xí)】CSS彈性盒布局和側(cè)邊欄 | UNFINISHED | 忘了上星期沒做,這星期沒安排 |
【學(xué)習(xí)】ES6解構(gòu)賦值和Module | DONE | |
【學(xué)習(xí)】React臨摹所有商品頁 | DONE | |
【看書】《切爾貝利諾》 | 0-50頁 | |
【電影】十二夜與永恒,總結(jié) | DONE | 1 |
總結(jié)
- 做靜態(tài)和接口對(duì)接時(shí)狀態(tài)不太佳,磨磨蹭蹭的,找個(gè)文件也要找好幾分鐘。約定很重要,希望定個(gè)公司開發(fā)規(guī)定,這樣能在每個(gè)item的地方都添加文件名作為一個(gè)有意義的class,再配合ctrl+p這么神奇的功能,找文件只需要好幾秒的事。
- 這個(gè)星期的React頁面用ES6語法(上星期主要是用React.createClass,這星期用class),主要遇到的問題:
- getInitialState函數(shù)在class內(nèi)不生效,ES6用constructor來初始化,還有constructor特別容易拼錯(cuò)...參考文檔
- class中的綁定事件與createClass中也有不同,在事件綁定處是用
<div data={this.state.data} onClick={this.handler.bind(this)}/>
必須要bind(this),否則handler處理函數(shù)里面的this是div - JSX中
render() {
return <ul>
this.state.data.map(function(item,index){
<li key={index} data-index={index} onClick={this.handler}/>
})
</ul>
}
handler (event){
console.log(event.target.dataset.index);
}
在handler函數(shù)中
console出來的有時(shí)是undefined,不能用event.target
,要用event.currentTarget
,參考文檔
- React聲明周期
react生命周期.png
onclick事件處理后的setState會(huì)觸發(fā)重新渲染,但是執(zhí)行的是componentWillUpdate而不是WillMount事件,這個(gè)要記清楚了。然后再willUpdate上是最好不要寫setState的,否則會(huì)不停地觸發(fā)渲染循環(huán)。
setState也是有個(gè)性的。
- css是可以直接畫icon的。