React合成事件系统

2019-06-08 本文已影响16人南风知我意ZD

React基于虚拟DOM实现了一个合成事件层，我们所定义的事件处理器会接收到一个合成事件对象的实例，它完全符合 W3C 标准，不会存在任何IE标准的兼容问题。并且与原生浏览器具有一样的接口，同样支持事件冒泡机制，可用 stopPropagation() 和 preventDefault() 来中断它。

所有事件都自动绑定在最外层上。如果需要访问原生事件对象，可以使用nativeEvent属性。

1、绑定方式

React事件的绑定方式在写法上与原生HTML事件监听很相似。

<button onClick={this.handleClick}></button>

但有以下区别：

（1）JSX中采用驼峰式属性命名方式，HTML事件则是全部小写：onclick

（2）JSX中props的值可以是任意类型，但 HTML 中只能是字符串：onclick="handleClick()"

（3）React事件没有直接绑定在 HTML 元素上！只是借鉴了这种写法。React中所有事件使用了事件委托方式自动绑定在最外层的。

2、实现机制

1、事件委派

React并不会把事件处理函数直接绑定到真实的节点上，而是使用一个统一的事件监听器 ReactEventListener ，把所有事件绑定到结构的最外层 document 节点上，依赖冒泡机制完成了事件委派。

ReactEventListener：维持了一个映射来保存所有组件内部的事件监听和处理函数，负责事件注册和事件分发。当组件在挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象；当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。这样简化了事件处理和回收机制，提升了效率。

事件注册包括两方面：（1）将时间事件注册到 document 这个原生DOM上（2）将注册的事件采用事务队列的当时存储起来，以便事件触发时回调。
事件分发：通过 ReactEventListener.dispatchEvent 回调函数实现。当事件触发时，document上 addEventListener 注册的 callback 会被回调，回调函数就是 ReactEventListener.dispatchEvent ，dispatchEvent会找到事件触发的 DOM 及其对应的 React 组件。

ReactEventEmitter：负责每个组件上事件的执行。事件的执行采用冒泡机制，从触发事件的对象开始，向父元素回溯，依次调用它们注册的事件callback。

2、事件绑定的三种方式

组件上绑定

<Component 事件={this.方法.bind(this)}></Component>

缺点：每次点击时都需要重新绑定一个函数，所以这种方式对性能有一定影响（因为函数的创建和销毁都是需要开销的）。

构造方法中绑定

constructor(props){
    super(props) ;
    this.方法 = this.方法.bind(this,'event','args') ;
    // event(事件名) 和 args(参数) 不是必须的。
}
<Component 事件={this.方法}></Component>

优点：只需要在组件初始化时绑定一次即可。

使用箭头函数

<Component 事件={(e) => this.方法(e,args)}</Component> 
  //其中 args (参数)不是必须的

缺点：由于箭头函数绑定是定义在 redner 方法中的，故组件每一次渲染都会创建一个新的箭头函数。同第一种方式，对性能有影响。

3、在React中使用原生事件

有时候React合成事件并不能满足我们的需求，我们不得不使用原生事件。原生事件就是我们在组件挂载后，在 componentDidMount 或 componentDidUpdate 方法中通过 ddEventListener 绑定的事件。

原生事件的传播方式有两种：事件冒泡和事件捕获。事件冒泡是从内层元素向外层元素触发，事件捕获是从外层元素向内层元素触发。具体采用哪一种传播方式，可以通过方法 addEventListener 的第三个参数来指定。为 true 就是事件捕获，为 false 就是事件冒泡.

事件传播是可以阻止的：

禁止事件冒泡

W3C： e.topPropagation();
IE：  window.event.cancelBubble = true;

禁止默认事件

W3C： e.preventDefault();
IE：  window.event.returnValue = false;

注意：

合成事件解决了IE兼容性问题，使用stopPropagation()即可禁止事件冒泡。
阻止 React 合成事件冒泡，并不能阻止原生事件的冒泡，就算使用 stopPropagation 也无法阻止原生事件的冒泡。
取消原生事件的冒泡也会同时取消 React 事件，并且原生事件的冒泡在 React 事件的触发和冒泡之前。

对于原生事件，一定要手动移除，否则很可能出现内存泄漏的问题。一般在componentDidMount() 方法中注册原生事件，在 componentWillUnmount() 方法中移除事件。

一般来说，尽量不要混用合成事件和原生事件，只有在使用 React 合成事件无法解决问题的这一场景，才去使用原生事件。因为两种混用非常容易导致问题，例如这样一个功能：点击按钮显示图片，点击非图片区域时将其隐藏。代码如下：

constructor(){
  this.handleClick = this.handleClick.biand(this);
  this.handleClickImg = this.handleClickImg.biand(this);

  this.state={
    visible: false,
  };
}

componentDidMount(){
  // 点击页面隐藏图片
  document.body.addEventListener('click', e=>{
    this.setState({
      visible: false,
    });
  });
}

componentWillUnmount(){
  document.body.removeEventListener('click'); // 组件卸载时，手动移除原生事件
}

// 点击按钮显示图片
handleClick(){
  this.setState({
    visible: true,
  });
}

handleClickImg(){
  e.stopPropagation(); // 试图实现：点击图片时，不隐藏图片
}

render(){
  return (
    <div>
      <button onClick={this.handleClick} >点击显示图片</button>
      <div
        className="image"
        style={{display: this.state.visible ? 'block' : 'none'}}
        onClick={this.handleClickImg}
      >
        <img src='' alt=''>
      </div>
    </div>
  )
}

在上面这个例子中，预期结果是：点击图片区域，图片不会隐藏。然而实际效果是点击图片时依然会隐藏图片。这就是因为 React 合成事件的委托机制的原因：在合成事件内部仅仅对最外层容器进行了绑定，并且依赖事件冒泡机制完成了委派。也就是说，handleClickImg事件并没有直接绑定在div.image元素上，因此在此处使用 e.stopPropagation() 并没有用。

解决方法：

使用原生事件来阻止

document.querySelector('image').addEventListener('click', e=>{
  e.stopPropagation(); 
});

componentWillUnmount(){
  document.body.removeEventListener('click'); // 组件卸载时，手动移除原生事件
  document.querySelector('image').removeEventListener('click');
}

<div
  className="image"
  style={{display: this.state.visible ? 'block' : 'none'}}
  >
    <img src='' alt=''>
</div>

通过e.target判断

componentDidMount(){
  document.body.addEventListener('click', e=>{
    if(e.target &&  e.target.matches('div.image')){
      return;
    }
    
    this.setState({
      visible: false,
    });
  });
}