react 合成事件

2018-09-30 本文已影响0人捡了幸福的猪

1. 场景

父组件是个左右可滑动的组件，子组件是可左右滑动的图片展示。功能是手指左右滑动时可页面切换，但是在滑动图片列表时不可页面切换，问题在于滑动子组件时总是在时不时的切换页面。
父组件实现是监测touchStart,touchMove,touchEnd三个事件，子组件实现是监测touchstart 阻止冒泡。

2. 分析

    多次测试，发现在滑动子组件时进行页面切换是总是进入父组件的touchMove，然后由于位置获取不正确，造成页面崩溃。
    于是子组件添加touchMove阻止冒泡，发现无用。
    单独测试发现，touchStart 的StopPropagation不会影响父组件的touchMove，touchEnd触发；
    另外脱离业务场景测试发现，在子组件进行touchStart 、touchMove、touchEnd 阻止冒泡时是可以的，但是在业务中却发现不可以---> 问题点
    查找touchMove,发现在父组件上touchMove 因为需要处理passive 问题，所以使用addEventListener进行绑定；子元素中使用onTouchMove进行绑定。单独测试发现，父组件的touchMove总是优于子组件的touchMove触发。

3. 原因

以上问题的原因很明显了，react事件和DOM原生事件混合使用的问题。

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。重要的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层Document进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。

React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡（注意是冒泡阶段）至document处时，React将事件内容封装并交由真正的处理函数运行。

React 中的event 不是原生的event，e.nativeEvent 才是原生 DOM 事件的那个 event。在测试中阻止冒泡可行是因为，e.stopPropagation() 阻止的是react 的合成的事件。

import React, { Component } from 'react';
class Test extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick(e) {
    console.log("子元素的点击");
  }
  componentDidMount(){
    const parent = document.getElementById("parent");
    parent.addEventListener("click",function(){
      console.log("父元素上的点击");
    })
  }
  render() {

    return (
      <div id="parent">
        <div id="child" onClick={this.onClick}>
        </div>
      </div>
    );
  }
}

export default Test;

业务场景简化如上，解决办法：
1）react 合成事件与DOM点击事件不同时使用
2）在父组件上使用target 进行判断。

在尝试解决这个问题，我尝试使用：子组件onTouchMove 在捕获阶段绑定，这样子组件touchmove的触发应优先于父组件，但实际并不是，原因在于：合成事件的监听器是统一注册在document上的，且仅有冒泡阶段，所以原生事件的监听器响应总是比合成事件的监听器早。

4. 延伸

以上React 的设计思想是：在 React 中不允许给同一个组件绑定多个相同类型的事件，如果非要重复绑定，那么后绑定的会覆盖前绑定的。要想在一个元素上绑定多个事件，需要使用原生方式。
那么问题来了：
如果我在一个元素上绑定多个事件，执行一个后，想停止执行其他的怎么办？ stopPropagation() ? No！

stopPropagation 能够阻止事件的进一步捕获或者冒泡；
假设事件流已经被某个元素捕获（或者冒泡到某个元素），那么便会触发此元素上绑定的事件。如果绑定的事件不止一个，则依次触发。假如想中断这种依次触发，需调用stopImmediatePropagation；
stopImmediatePropagation常常在多个第三方库混用时，用来阻止多个事件监听器中的非必要执行。
但React体系中，一个组件只能绑定一个同类型的事件监听器（重复定义时，后面的监听器会覆盖之前的），所以合成事件甚至都不去封装stopImmediatePropagation。
事实上nativeEvent的stopImmediatePropagation只能阻止绑定在document上的事件监听器，所以在案例中的问题不能在子组件中使用e.nativeEvent.stopImmediatePropagation() 去解决，因为不是document。
🌰：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  
  constructor(props) {
    super(props);
    this.parentClick = this.parentClick.bind(this);
    this.childClick = this.childClick.bind(this);
  }
  parentClick(e) {
    console.log("react:父元素的点击");
  }


  childClick(e) {
    // e.stopPropagation();
    console.log("react:子元素的点击");
  }
  componentDidMount(){
    const parent = document.getElementById("parent");
    const child = document.getElementById("child");
    parent.addEventListener("click",function(e){
      console.log("dom:父元素上的点击");
    })
    child.addEventListener("click",function(e){
      e.stopPropagation();
      console.log("dom:子元素上的点击");
    })
  }
  render() {
    return (
      <div id="parent" onClick={this.parentClick}>
        <div id="child" onClick={this.childClick}>
          click
        </div>
      </div>
    );
  }
}

export default App;

执行结果是：

dom:子元素上的点击

🌰:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  
  constructor(props) {
    super(props);
    this.parentClick = this.parentClick.bind(this);
    this.childClick = this.childClick.bind(this);
  }
  parentClick(e) {
    console.log("react:父元素的点击");
  }


  childClick(e) {
    e.stopPropagation();
    console.log("react:子元素的点击");
  }
  componentDidMount(){
    const parent = document.getElementById("parent");
    const child = document.getElementById("child");
    parent.addEventListener("click",function(e){
      console.log("dom:父元素上的点击");
    })
    child.addEventListener("click",function(e){
      // e.stopPropagation();
      console.log("dom:子元素上的点击");
    })
  }
  render() {
    return (
      <div id="parent" onClick={this.parentClick}>
        <div id="child" onClick={this.childClick}>
          click
        </div>
      </div>
    );
  }
}

export default App;

结果：

dom:子元素上的点击
dom:父元素上的点击
react:子元素的点击

可以发现原生事件上的阻止冒泡才是真正的冒泡。

react 合成事件

1. 场景

2. 分析

3. 原因

4. 延伸

猜你喜欢

热点阅读