【一周】2016.12.12-2016.12.18

Plan Done Mark
【任务】所有静态页面 DONE 接口也基本对接完毕,但是模板还需要修改
【学习】CSS弹性盒布局和侧边栏 UNFINISHED 忘了上星期没做,这星期没安排
【学习】ES6解构赋值和Module DONE
【学习】React临摹所有商品页 DONE
【看书】《切尔贝利诺》 0-50页
【电影】十二夜与永恒,总结 DONE 1

总结

  • 做静态和接口对接时状态不太佳,磨磨蹭蹭的,找个文件也要找好几分钟。约定很重要,希望定个公司开发规定,这样能在每个item的地方都添加文件名作为一个有意义的class,再配合ctrl+p这么神奇的功能,找文件只需要好几秒的事。
  • 这个星期的React页面用ES6语法(上星期主要是用React.createClass,这星期用class),主要遇到的问题:
    1. getInitialState函数在class内不生效,ES6用constructor来初始化,还有constructor特别容易拼错...参考文档
    2. class中的绑定事件与createClass中也有不同,在事件绑定处是用<div data={this.state.data} onClick={this.handler.bind(this)}/>必须要bind(this),否则handler处理函数里面的this是div
    3. 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参考文档

  1. React声明周期
    react生命周期.png

    onclick事件处理后的setState会触发重新渲染,但是执行的是componentWillUpdate而不是WillMount事件,这个要记清楚了。然后再willUpdate上是最好不要写setState的,否则会不停地触发渲染循环。
    setState也是有个性的。
  • css是可以直接画icon的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容