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