React基础2：React事件处理机制

一、事件处理

1、React事件和DOM事件

事件对比.png

onClick={this.handle}
doSomething(){
  if(count<0){
    count = 0;
  }
}
handle(ev){
  // console.log(ev)
  count--;
  this.doSomething(); // 会报错哦 
}

2、this关键字的问题

面向对象编程中this的问题：js中this会随引用对象的差别而有不同。
解决方法：
（1）JSX中使用bind方法

<button onClick={this.handle.bind(this)} type="button">减</button>

（2）在构造函数中使用bind方法

constructor(props){
  super(props)
  this.handle = this.handle.bind(this);
}

（3）使用箭头函数（推荐）

handle=(ev)=>{
   count--;
   this.doSomething();  
}

3、向事件处理程序传递参数

onClick={this.handle.bind(this,9)}或
onClick={(ev)=>{ this.handle(this.props.data.id,ev) }}

4、向父组件传递参数

在父组件定义好事件处理函数，并通过props向子组件传递。

// 子组件
<button onClick={()=>{ this.props.onDelete(this.props.data.id)}}>删除</button>

// 父组件
handleDelete = id =>{
  console.log('id: ',id);
}
renderList(){
  return listData.map(item=>{
    return (
      <ListItem
        key={item.id}
        data={item}
        onDelete={this.handleDelete}    //  看这里哦~
      />
    )
  })
}

5、React事件机制

（1）DOM事件机制

先进入捕获过程，父级元素将事件一直传递到事件发生的元素；然后执行事件处理；再进入冒泡阶段，将事件向外层传递。也就是将子元素的事件委托给父元素进行处理。

DOM事件机制.png

（2）React事件机制

react将事件都绑定在document上，统一使用事件监听，并在冒泡阶段处理事件。当挂载 / 卸载组件时，只需在统一的事件监听位置增加或删除对象即可。

事件触发时，组件会生成一个合成事件，传递到document中；document通过dispatch Event回调函数依次执行dispatch listener中同类型事件的监听函数。

事件注册是在组件生成时，将virtual dom中所有事件对应的原生事件都注册在一个监听器listenerBank中，并以key作为索引。这样就将将可能要处理的事件进行了分类。

React事件机制.png

（3）要素：
※ React事件是合成事件，不是DOM原生事件
※ 在document监听所有支持事件
※ 使用统一的分发函数dispatchEvent