React Native 关于箭头函数、普通函数与点击事件的调用

箭头函数

• 箭头函数一个重要的好处就是对于this对象指向问题，在普通函数中this对象的指向是可变的，所以在普通函数中this对象可能会存在null的情况，但是箭头函数中this是固定的。
• this指向定义时所在对象的作用域而不是使用时的。
• 关于使用

  //箭头函数
  press0 = () => {
    this.setState({
      data0: "0被点击了"
    })
  };

• 调用（以下区别：调用时是否加（））
  • (1) 正确：不被立即执行
    正确的方式应该不在render的时候立即执行。因此正确调用方法如下，同时，箭头函数将一个函数赋值给press0变量，变量在调用的时候自然不需要加（）

 <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