一. 箭头函数
//代码2
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {number: 0};
}
handleClick() {
this.setState({
number: ++this.state.number
});
}
render() {
return (
<div>
<div>{this.state.number}</div>
<button onClick={()=>{this.handleClick();}}>
Click
</button>
</div>
);
}
}
//箭头函数
press0 = () => {
this.setState({
data0: "0被点击了"
})
};
1.1 使用箭头函数的优点
1、箭头函数一个重要的好处就是对于
this对象指向问题，在普通函数中this对象的指向是可变的，所以在普通函数中this对象可能会存在null的情况，但是箭头函数中this是固定的。2、
this指向定义时所在对象的作用域而不是使用时的。
1.2 箭头函数的缺点
- 这种方式最大的问题是，每次
render调用时，都会重新创建一个事件的回调函数，带来额外的性能开销，当组件的层级越低时，这种开销就越大，因为任何一个上层组件的变化都可能会触发这个组件的render方法。当然，在大多数情况下，这点性能损失是可以不必在意的。这种方式也有一个好处，就是不需要考虑this的指向问题，因为这种写法保证箭头函数中的this指向的总是当前组件。
1.3 立即执行与非立即执行
正确方式：
<Text style={styles.text}
onPress={this.press0}
>{this.state.data0}</Text>
错误方式：
<Text style={styles.text}
onPress={this.press0()}
>{this.state.data0}</Text>
正确的方式：应该不在
render的时候立即执行,箭头函数将一个函数赋值给press0变量，变量在调用的时候不需要加()；错误的方式：会导致
onPress事件直接被调用press0方法修改了state， 由于state被修改，页面被重新渲染，再次直接调用press0形成循环 .
二. 普通函数
2.0 调用方式
（1）箭头方式
onPress={() => this.press1()}
1
(2)bind方式
onPress={this.press2.bind(this)}
2.0.1 无参数调用
//一般方法（无参）
press1() {
this.setState({
data1: "1被点击了"
})
};
press2() {
this.setState({
data2: "2被点击了"
})
};
<Text
style={styles.text}
onPress={() => this.press1()}
>{this.state.data1}</Text>
<Text
style={styles.text}
onPress={this.press2.bind(this)}
>{this.state.data2}</Text>
2.0.2 有参数调用
//一般方法（有参）
press3(x) {
this.setState({
data3: x
})
};
press4(x) {
this.setState({
data4: x
})
};
<Text
style={styles.text}
onPress={()=>this.press4(2222)}
>{this.state.data4}</Text>
<Text
style={styles.text}
onPress={this.press3.bind(this, 2222)}
>{this.state.data3}</Text>
三，注意
关于事件响应的回调函数，还有一个地方需要注意。不管你在回调函数中有没有显式的声明事件参数Event，React都会把事件Event作为参数传递给回调函数，且参数Event的位置总是在其他自定义参数的后面。例如，在代码6和代码7中，handleClick的参数中虽然没有声明Event参数，但你依然可以通过arguments[1]获取到事件Event对象。
