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声明周期
onclick事件处理后的setState会触发重新渲染,但是执行的是componentWillUpdate而不是WillMount事件,这个要记清楚了。然后再willUpdate上是最好不要写setState的,否则会不停地触发渲染循环。
setState也是有个性的。
- css是可以直接画icon的。