himi在写react 时主要遇到两个知识点觉得很有必要跟大家一起回顾下。
函数绑定 flexbox 布局 一:函数绑定 首先来看一段代码片段:
constructor(props) { super(props); this.state = { myname:'i am myname!', }; } componentwillmount() { this.state.myname='cwm'; } testfun1(){ this.state.myname='tf1'; alert.alert('himi', ' testfun1 '); } testfun2(){ alert.alert('himi', ' testfun2 '); }
在state中声明了myname
constructor: 组件的构造函数
componentwillmount : 组件预加载前调用的生命周期函数
testfun1、 testfun2 :是两个自定义的函数。
继续看render中的一段:
这里创建了两个图片组件且都添加了触摸组件,分别绑定自定义的函数testfun1 与 testfun2
当我们点击第一个图片时会报错,运行效果如下: (点击查看动态图)
错误是说this没有undefined,原因是因为当想在自定义的函数中使用this,那么需要进行函数绑定。
函数绑定: 函数进行 bind(绑定) 可以确保在函数中的 this 作为组件实例的引用,也就是说你想在自定义的函数中使用this,那么请先进行将此函数bind(this) 那么细心的童鞋会发现!为什么在 componentwillmount 函数中也使用了this却通过了?因为 componentwillmount 是组件的生命周期函数 。
那么常用的函数绑定方式有如下几种: 1. 在生命周期函数中绑定,如下: this.testfun1 = this.testfun1.bind(this)
2. 使用的地方直接绑定,如下: onpress={this.testfun1.bind(this)}
3. 直接在使用的地方直接lambda,更方便 �� 如下: onpress={()=>{ this.state.myname='tf1'; alert.alert('himi', ' testfun1 ');}}
一:flexbox 布局 关于css 的flexbox 本篇不重新赘述了,一来是因为网上一搜一大把的教程,二来不一定有别人写的仔细 – -… 。但是,himi这里推荐两个链接,学习足以:
1. 详细介绍与分析: http://www.tuicool.com/articles/vqn6zru
2. 直观的教程: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
