React事件处理

1. React合成事件（SyntheticEvent）

  React按照W3C的规范自定义了一套事件系统，这套事件系统解决了各种浏览器之间的兼容问题，利用了事件委托的方式把事件代理到了document上，而不是像原生DOM事件那样把事件处理函数直接绑定到了触发事件的DOM元素上。
  事件委托的方式会指定统一的事件处理回调函数dispatchEvent，在document上只会绑定一个事件，在事件冒泡到document时就会触发统一的事件分发函数，对各种类型的事件进行合成，再执行合成事件的回调。这样的方式既减小了内存的开销，也可以在组件挂载时能统一订阅所有事件，销毁时移除所有事件。

2. React事件的绑定方式

 事件绑定的方式有三种：
（1）直接传入一个函数作为事件处理回调函数

import React, { Component } from 'react'

export default class Login extends Component {
  render() {
    return (
      <div>
        <button onClick={this.login}>登录</button>
      </div>
    )
  }
  login() {
    console.log("登录成功！")
  }
}

（2）传入一个箭头函数作为事件处理的函数

import React, { Component } from 'react'

export default class Login extends Component {
  render() {
    return (
      <div>
        // (1).逻辑简单代码较少时可以直接传入回调函数
        // <button onClick={()=>{console.log("登录成功！")}}>登录</button> 

        // (2).逻辑复杂代码多时
        <button onClick={this.login}>登录</button>
      </div>
    )
  }
  login = () => {
    console.log("登录成功！")
  }
}

（3）传入一个箭头函数，在箭头函数内部直接调用事件处理函数

import React, { Component } from 'react'

export default class Login extends Component {
  render() {
    return (
      <div>
        <button onClick={() => this.login()}>登录</button>
      </div>
    )
  }
  login() {
    console.log("登录成功！")
  }
}

3. React事件处理函数的参数传递

（1）JavaScript中的类 (class) 不会对其中定义的函数绑定this，上述的第一种事件绑定方式在绑定this后才可以传递参数，利用Function.prototype.bind来实现this的绑定和传参， React的事件对象event以及更多的参数会被隐式的进行传递。

import React, { Component } from 'react'

export default class Login extends Component {
  constructor() {
    super()
    this.username = "SiriusXiaoxin"
  }
  render() {
    return (
      <div>
        <button onClick={this.login.bind(this,this.username)}>登录</button>
      </div>
    )
  }
  login(username,event) {
    console.log(username+"登录成功！")
    console.log(event)
  }
}

（2）通过上述的第三种事件绑定方式也可以进行参数传递，由于箭头函数的内部this始终指向它的父级作用域，可以不用绑定this，但是事件对象event必须要显式的进行传递才可以在事件处理回调中访问到。

import React, { Component } from 'react'

export default class Login extends Component {
  constructor() {
    super()
    this.username = "SiriusXiaoxin"
  }
  render() {
    return (
      <div>
        <button onClick={(event)=>this.login(this.username,event)}>登录</button>
      </div>
    )
  }
  login(username,event) {
    console.log(username+"登录成功！")
    console.log(event)
  }
}

4. 小结

（1）我们获取到的React事件对象并不是原生的DOM事件对象，而是React自定义的事件 (SyntheticEvent) 对象；
（2）React的事件采用委托方式，把各种事件统一交由document的统一回调处理，这样的方式能解决诸多问题；
（3）React的事件绑定要注意事件处理函数中this的指向，这样才能够保证参数的传递。