ReactNative关于普通函数和箭头函数的调用方式

一.箭头函数

1.无参

  //无参箭头函数
  press = () => {
    this.setState({
      data: 1
    })
  };

正确调用:
直接使用函数名,因为整个函数赋值给了press,使用press代表箭头函数,这样不会出现初始化时自动调用

 <Text onPress={this.press} >{this.state.data}</Text> //正确

错误调用:

函数名后面加括号则代表了直接调用改函数,会自动调用该方法

 <Text onPress={this.press()} >{this.state.data}</Text>//错误

这样写不会自动调用,但是有点多此一举,

 <Text onPress={()=>this.press()} >{this.state.data}</Text>//正确

2.有参

  //有参箭头函数
  press = (num) => {
    this.setState({
      data: num
    })
  };

有参只能通过箭头函数的方式调用,因为加括号会直接调用函数

 <Text onPress={()=>this.press(num)} >{this.state.data}</Text>//正确

二.普通函数

1.无参

  press() {
    this.setState({
      data: 1
    })
  };

正确调用:

需要加括号来调用,不自动调用

    <Text onPress={() => this.press()} >{this.state.data}</Text>
    或者
    <Text onPress={this.press.bind(this)} >{this.state.data}</Text>

错误调用:

不用箭头函数方式会自动调用

    <Text onPress={this.press()} >{this.state.data}</Text>

2.有参

  press(num) {
    this.setState({
      data: num
    })
  };

正确调用:

需要加括号来调用,不自动调用

    <Text onPress={() => this.press(num)} >{this.state.data}</Text>
    或者
    <Text onPress={this.press.bind(this,num)} >{this.state.data}</Text>

错误调用:

不用箭头函数方式会自动调用

    <Text onPress={this.press(num)} >{this.state.data}</Text>
发布了82 篇原创文章 · 获赞 155 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/hxl517116279/article/details/103212901