React处理事件响应机制

一. 箭头函数

//代码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对象。