React事件的问题-技术圈

React事件的问题

共 2952字，需浏览 6分钟

· 2022-01-16

React 把事件委托到 document 对象上。

当真实 DOM 元素触发事件，先处理原生事件，然后会冒泡到 document 对象后，再处理 React 事件。

React事件绑定的时刻是在 reconciliation 阶段，会在原生事件的绑定前执行

在 React17 以前 React 的合成事件和原生事件存在执行顺序问题，比如下面的例子，包含了两个父子关系的 DOM 元素，并且分别给他们绑定 React 事件和原生事件。

import * as React from 'react';import * as ReactDOM from 'react-dom';class App extends React.Component {  parentRef=React.createRef();  childRef=React.createRef();  componentDidMount() {    this.parentRef.current.addEventListener("click", () => {      console.log("父元素原生捕获");    },true);    this.parentRef.current.addEventListener("click", () => {      console.log("父元素原生冒泡");    });    this.childRef.current.addEventListener("click", () => {      console.log("子元素原生捕获");    },true);    this.childRef.current.addEventListener("click", () => {      console.log("子元素原生冒泡");    });    document.addEventListener('click',()=>{        console.log("document捕获");    },true);    document.addEventListener('click',()=>{        console.log("document冒泡");    });  }  parentBubble = () => {    console.log("父元素React事件冒泡");  };  childBubble = () => {    console.log("子元素React事件冒泡");  };  parentCapture = () => {    console.log("父元素React事件捕获");  };  childCapture = () => {    console.log("子元素React事件捕获");  };  render() {    return (      <div ref={this.parentRef} onClick={this.parentBubble} onClickCapture={this.parentCapture}>        <p ref={this.childRef} onClick={this.childBubble} onClickCapture={this.childCapture}>          事件执行顺序        p>      div>    );  }}ReactDOM.render(<App />, document.getElementById('root'));/**document捕获父元素原生捕获子元素原生捕获子元素原生冒泡父元素原生冒泡父元素React事件捕获子元素React事件捕获子元素React事件冒泡父元素React事件冒泡document冒泡 */

通过代码的执行顺序我们发现，先执行了原生事件的捕获和冒泡，再执行 React 事件的捕获冒泡。其实比较合理的顺序是 React 事件和原生事件都捕获再原生事件冒泡和 React 事件冒泡。

import * as React from 'react';import * as ReactDOM from 'react-dom';class App extends React.Component {  parentRef=React.createRef();  childRef=React.createRef();  componentDidMount() {    this.parentRef.current.addEventListener("click", () => {      console.log("父元素原生捕获");    },true);    this.parentRef.current.addEventListener("click", () => {      console.log("父元素原生冒泡");    });    this.childRef.current.addEventListener("click", () => {      console.log("子元素原生捕获");    },true);    this.childRef.current.addEventListener("click", () => {      console.log("子元素原生冒泡");    });    document.addEventListener('click',()=>{        console.log("document原生捕获");    },true);    document.addEventListener('click',()=>{        console.log("document原生冒泡");    });  }  parentBubble = () => {    console.log("父元素React事件冒泡");  };  childBubble = () => {    console.log("子元素React事件冒泡");  };  parentCapture = () => {    console.log("父元素React事件捕获");  };  childCapture = () => {    console.log("子元素React事件捕获");  };  render() {    return (      <div ref={this.parentRef} onClick={this.parentBubble} onClickCapture={this.parentCapture}>        <p ref={this.childRef} onClick={this.childBubble} onClickCapture={this.childCapture}>          事件执行顺序        p>      div>    );  }}ReactDOM.render(<App />, document.getElementById('root'));/**document原生捕获父元素React事件捕获子元素React事件捕获父元素原生捕获子元素原生捕获子元素原生冒泡父元素原生冒泡子元素React事件冒泡父元素React事件冒泡document原生冒泡 */

react17 以后合成事件执行顺序问题已经修复了，React 事件和原生事件都捕获再原生事件冒泡和 React 事件冒泡。