React事件和原生事件关系

React 事件机制

  react自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发
  React 和 原始事件是两套机制。 React事件是基于原始事件机制下完成的

• 结论

  • 原生事件 （捕获阶段-目标元素阶段-冒泡阶段）

    • 绑定在对应dom节点上 在合适时机触发

      document.getElementById().addEventListener('click',()=>{
    
      })
    

  • React重写事件处理机制

    • onClick | onInput | onFocus 等为React事件

    • 所有React 事件 都是在document上对于事件触发后，模拟派发。（新版React 有所不同见下）

      

    • React 事件是在冒泡阶段触发

    • React 事件触发时机后于原生事件

  • 两者关系

    • React 事件为合成事件SyntheticEvent基于原始Event
    • 原始事件停止冒泡会阻止合成事件触发 ， 相反不会
    • 不建议混用。 理解后可以得心应手

• 运行顺序 （旧版React）

  

  • 顺序
    • 原生事件捕获阶段
    • 原生事件冒泡阶段
    • 原生事件冒泡到document ，开始React 事件执行 模拟冒泡

• 运行顺序（新版React）
  

  • 顺序
    • 原生事件捕获阶段
    • 原生事件冒泡阶段至React App 根元素
    • React 合成事件 开始从根节点往下进行事件模拟捕获和冒泡
    • 合成事件模拟完毕后，继续原生事件冒泡到document 。

• 现象理解

  • 事件绑定

      class Test extend React.Component{
        componentDidMount() {
          document.addEventListener('click', e => {
            console.log("document:原生事件");
          });
          document.getElementById('container').addEventListener('click', e => {
            console.log("parent:原生事件");
          });
        }
    
        childClick = (event) => {
          console.log("child:React事件");
        }
    
        parentClick = (event) => {
          console.log("parent:React事件");
        }
    
        render() {
          return (
            <Fragment>
              <div id="container" onClick={this.parentClick}>
                Event
                <br/>
                <div onClick={this.childClick}>Click</div>
              </div>
            </Fragment>
          )
        }
    
      }
    

    • onClick 事件绑定在document ele.addEventListner 绑定在对应dom节点上
    • 点击Click文字后 先执行原生事件完成冒泡后， 再执行React 事件冒泡。
      

• 原生事件阻止冒泡

  	class Test extends React.component {
  		componentDidMount() {
  			document.addEventListener('click', e => {
   			 	console.log("document:原生事件");
  			});
  			document.getElementById('container').addEventListener('click', e => {
    				console.log("parent:原生事件");
    				e.stopPropagation()
    			});
  	 }
  	  childClick = (event) => console.log("child:React事件");
  	  parentClick = (event) => console.log("parent:React事件")
  	  
  	  render() {
  	   return (
  	   		<Fragment>
  	  			 <div id="container" onClick={this.parentClick}>
  	  			 	Event
  	   				<br />
  	  			 	<div onClick={this.childClick}>Click</div>
  	   			</div>
  	    </Fragment> )
  	    }
  	 }
  

  • 原生事件阻止冒泡 React事件不会执行。反者不行