摘要：因?yàn)樽柚故录芭莸男袨橹荒苡糜诤铣墒录?，沒法阻止原生事件的冒泡。同時(shí)的創(chuàng)建和冒泡是在原生事件冒泡到最頂層的之后的。淺析之事件系統(tǒng)一

上篇文章中，我們談到了React事件系統(tǒng)的實(shí)現(xiàn)方式，和在React中使用原生事件的方法，那么這篇文章我們來繼續(xù)分析下，看看React中合成事件和原生事件混用的各種情況。

在上篇文章中，我們舉了個(gè)例子。為了防止大家不記得，我們來看看那個(gè)例子的代碼。

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 (
      

        Open Image
          

            
          
      
    )
  }
}
ReactDOM.render(, document.getElementById("root"));

這有什么問題呢？ 問題就在于，如果我們點(diǎn)擊image的內(nèi)部依舊可以收起Image，那么這是為什么呢？這是因?yàn)槲覀兗皶r(shí)點(diǎn)擊了Image的內(nèi)部，body上綁定的事件處理器依舊會(huì)執(zhí)行，這樣就讓我們的image收起來了。那我們?nèi)绻幌胱宨mage收起來改怎么做呢？

首先的想法是停止冒泡，如果我們在img-container中就停止冒泡了是不是就可以讓image不消失了呢？比如這樣：

...
handleClickImage(e){
    e.preventDefault();
    e.stopPropagation();
  }
  
  render(){
    return (
      

        Open Image
          

            
          
      
    )
  }
...

Open In CodePen

在這里我們定義一個(gè)handleClickImage的方法，在其中我們執(zhí)行取消默認(rèn)行為和停止冒泡。那是似乎效果并不是我們想要的。因?yàn)樽柚筊eact事件冒泡的行為只能用于React合成事件中，沒法阻止原生事件的冒泡。同樣用React.NativeEvent.stopPropagation()也是無法阻止冒泡的。

如何解決這樣的問題呢？首先，盡量的避免混用合成事件和原生事件。需要注意的點(diǎn)是：

阻止react 合成事件冒泡并不會(huì)阻止原生時(shí)間的冒泡，從上邊的例子我們已經(jīng)看到了，及時(shí)使用stopPropagation也是無法阻止原生時(shí)間的冒泡的。

第二點(diǎn)需要注意的是，取消原生時(shí)間的冒泡會(huì)同時(shí)取消React Event。并且原生事件的冒泡在react event的觸發(fā)和冒泡之前。同時(shí)React Event的創(chuàng)建和冒泡是在原生事件冒泡到最頂層的component之后的。我們來看這個(gè)例子：

class App extends React.Component {
  
  render(){
   return ;
  }
}

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 (
      

        
GrandPa Clicked at: {this.state.clickTime}
        
      
    )
  }
}

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 (
      

       
Dad Clicked at: {this.state.clickTime}
        
      
     )
  }
}

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 (
      

       
Son Clicked at: {this.state.clickTime} 
      
     )
  }
}

ReactDOM.render(, document.getElementById("root"));

Open in CodePen

在這個(gè)例子中我們有三個(gè)component，Son Dad，Grandpa。同時(shí)定義了React Event handler 和 native event handler，并在Dad的native Event handler中stopPropagation，當(dāng)我們點(diǎn)擊Son or Dad component的時(shí)候會(huì)發(fā)現(xiàn)，React Event handler并沒有被trigger。
console里的output為：

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

這就說明native Event的停止冒泡可以阻斷所有的React Event。所以即使我們是在Dad上停止冒泡的，依舊阻斷了Son上的React Event。

同時(shí)如果我們把dad上的stopPropagation remove掉我們會(huì)看到如下結(jié)果：

"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的合成時(shí)間是在原生事件冒泡到最頂層組件結(jié)束后才創(chuàng)建和冒泡的，也是符合React的原理，因?yàn)樵谑菍?shí)現(xiàn)的時(shí)候React只是將一個(gè)Event listener 掛在了最頂層的組件上，其內(nèi)部一套自己的機(jī)制進(jìn)行事件的管理。

淺析React之事件系統(tǒng)（一）