浅析React之事件系统（二）

上篇文章中，咱们谈到了React事件系统的实现方式，和在React中使用原生事件的方法，那么这篇文章咱们来继续分析下，看看React中合成事件和原生事件混用的各类状况。

上一个例子

在上篇文章中，咱们举了个例子。为了防止你们不记得，咱们来看看那个例子的代码。

class App extends React.Component {

  constructor(props){
    super(props);
    
    this.state = {
      show: false
    }
    
    this.handleClick = this.handleClick.bind(this)
    this.handleClickImage = this.handleClickImage.bind(this);
  }
  
  handleClick(){
   this.setState({
     show: true
   })
  }
  
  componentDidMount(){
    document.body.addEventListener('click', e=> {
      this.setState({
        show: false
      })
    })
  }
  
  componentWillUnmount(){
    document.body.removeEventListener('click');
  }
  
  handleClickImage(e){
    console.log('in this ')
    e.stopPropagation();
  }
  
  render(){
    return (
      <div className="container">
        <button onClick={this.handleClick}>Open Image</button>
          <div className="img-container" style={{ display: this.state.show ? 'block': 'none'}} onClick={this.handleClickImage}>
            <img src="http://blog.addthiscdn.com/wp-content/uploads/2014/11/addthis-react-flux-javascript-scaling.png" />
          </div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

这有什么问题呢？ 问题就在于，若是咱们点击image的内部依旧能够收起Image，那么这是为何呢？这是由于咱们及时点击了Image的内部，body上绑定的事件处理器依旧会执行，这样就让咱们的image收起来了。那咱们若是不想让image收起来改怎么作呢？

首先的想法是中止冒泡，若是咱们在img-container中就中止冒泡了是否是就可让image不消失了呢？好比这样：

...
handleClickImage(e){
    e.preventDefault();
    e.stopPropagation();
  }
  
  render(){
    return (
      <div className="container">
        <button onClick={this.handleClick}>Open Image</button>
          <div className="img-container" style={{ display: this.state.show ? 'block': 'none'}} onClick={this.handleClickImage}>
            <img src="http://blog.addthiscdn.com/wp-content/uploads/2014/11/addthis-react-flux-javascript-scaling.png" />
          </div>
      </div>
    )
  }
...

Open In CodePen

在这里咱们定义一个handleClickImage的方法，在其中咱们执行取消默认行为和中止冒泡。那是彷佛效果并非咱们想要的。由于阻止React事件冒泡的行为只能用于React合成事件中，无法阻止原生事件的冒泡。一样用React.NativeEvent.stopPropagation()也是没法阻止冒泡的。

如何解决这样的问题呢？首先，尽可能的避免混用合成事件和原生事件。须要注意的点是：

1. 阻止react 合成事件冒泡并不会阻止原生时间的冒泡，从上边的例子咱们已经看到了，及时使用stopPropagation也是没法阻止原生时间的冒泡的。

2. 第二点须要注意的是，取消原生时间的冒泡会同时取消React Event。而且原生事件的冒泡在react event的触发和冒泡以前。同时React Event的建立和冒泡是在原生事件冒泡到最顶层的component以后的。咱们来看这个例子：

class App extends React.Component {
  
  render(){
   return <GrandPa />;
  }
}

class GrandPa extends React.Component {
  constructor(props){
      super(props);
      this.state = {clickTime: 0};
      this.handleClick = this.handleClick.bind(this);
  }
  
 handleClick(){
   console.log('React Event grandpa is fired');
  this.setState({clickTime: new Date().getTime()})
};
  
  componentDidMount(){
    document.getElementById('grandpa').addEventListener('click',function(e){
      console.log('native Event GrandPa is fired');
    })
  }
  
  render(){
    return (
      <div id='grandpa' onClick={this.handleClick}>
        <p>GrandPa Clicked at: {this.state.clickTime}</p>
        <Dad />
      </div>
    )
  }
}

class Dad extends React.Component {
  constructor(props){
    super(props);
    this.state = {clickTime:0};
    this.handleClick=this.handleClick.bind(this);
  }
  
  componentDidMount(){
    document.getElementById('dad').addEventListener('click',function(e){
      console.log('native Event Dad is fired');
      e.stopPropagation();
    })
  }
  
  handleClick(){
    console.log('React Event Dad is fired')
    this.setState({clickTime: new Date().getTime()})
  }
  
  render(){
    return (
      <div id='dad' onClick={this.handleClick}>
       <p>Dad Clicked at: {this.state.clickTime}</p>
        <Son />
      </div>
     )
  }
}

class Son extends React.Component {
  constructor(props){
    super(props);
    this.state = {clickTime:0};
    this.handleClick=this.handleClick.bind(this);
  }
  
  handleClick(){
    console.log('React Event Son is fired');
    this.setState({clickTime: new Date().getTime()})
  }
  
  componentDidMount(){
    document.getElementById('son').addEventListener('click',function(e){
      console.log('native Event son is fired');
    })
  }
  
  render(){
    return (
      <div id="son">
       <p onClick={this.handleClick}>Son Clicked at: {this.state.clickTime} </p>
      </div>
     )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Open in CodePen

在这个例子中咱们有三个component，Son Dad，Grandpa。同时定义了React Event handler 和 native event handler，并在Dad的native Event handler中stopPropagation，当咱们点击Son or Dad component的时候会发现，React Event handler并无被trigger。
console里的output为：

"native Event son is fired"
"native Event Dad is fired"

这就说明native Event的中止冒泡能够阻断全部的React Event。因此即便咱们是在Dad上中止冒泡的，依旧阻断了Son上的React Event。

同时若是咱们把dad上的stopPropagation remove掉咱们会看到以下结果：

"native Event son is fired"
"native Event Dad is fired"
"native Event GrandPa is fired"
"React Event Son is fired"
"React Event Dad is fired"
"React Event grandpa is fired"

这就说明React的合成时间是在原生事件冒泡到最顶层组件结束后才建立和冒泡的，也是符合React的原理，由于在是实现的时候React只是将一个Event listener 挂在了最顶层的组件上，其内部一套本身的机制进行事件的管理。

浅析React之事件系统（一）