箭头函数
- 箭头函数一个重要的好处就是对于this对象指向问题,在普通函数中this对象的指向是可变的,所以在普通函数中this对象可能会存在null的情况,但是箭头函数中this是固定的。
- this指向定义时所在对象的作用域而不是使用时的。
- 关于使用
//箭头函数
press0 = () => {
this.setState({
data0: "0被点击了"
})
};
- 调用(以下区别:调用时是否加())
- (1) 正确:不被立即执行
正确的方式应该不在render的时候立即执行。因此正确调用方法如下,同时,箭头函数将一个函数赋值给press0变量,变量在调用的时候自然不需要加()
- (1) 正确:不被立即执行
<Text
style={styles.text}
onPress={this.press0}>{this.state.data0}</Text>
- (2) 错误:被立即执行
{/*下面的调用方法错误,原因:下面的调用方式导致onPress事件直接被调用press0方法修改了state,
由于state被修改,页面被重新渲染,再次直接调用press0形成循环
*/}
<Text
style={styles.text}
onPress={this.press0()}>{this.state.data0}</Text>
普通函数
普通函数的无参与有参的调用方式相同。注意的是有参的函数使用bind方式传递参数时this必须在最前面。
调用方式
(1) 箭头方式
onPress={() => this.press1()}
(2) bind方式
onPress={this.press2.bind(this)}
无参
// 一般方法(无参)
press1() {
this.setState({
data1: "1被点击了"
})
};
press2() {
this.setState({
data2: "2被点击了"
})
};
调用
(1)正确:不被立即执行
<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)错误:被立即执行
错误原因:同上render渲染被循环调用
<Text
style={styles.text}
onPress={this.press1()}>
{this.state.data1}</Text>
有参
//一般方法(有参)
press3(x) {
this.setState({
data3: x
})
};
press4(x) {
this.setState({
data4: x
})
};
调用:
(1)正确:不被立即执行
<Text
style={styles.text}
onPress={this.press3.bind(this, 2222)}
>{this.state.data3}</Text>
<Text
style={styles.text}
onPress={()=>this.press4(2222)}
>{this.state.data4}</Text>
(2)错误:被立即执行
press5 = (x) => {
this.setState({
data5: x
})
};
<Text
style={styles.text}
onPress={this.press5(2222)}>{this.state.data5}</Text>
————————————————
版权声明:本文为CSDN博主「danfengw」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/danfengw/article/details/80840060