React 合成事件

背景：本文是笔者在使用 React 开发过程中遇到的问题，对 React合成事件做了一些简单的探索总结，本文不涉及具体的源码部分，而是通过一些Demo去理解 React合成事件，希望能对大家实际开发过程中有一些帮助。如有语义描述不清或错误点，还望大家能够指出。

大家都知道 React 有一套自己的事件机制，如官方文档所述：

SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。

如果因为某些原因，当你需要使用浏览器的底层事件时，只需要使用 nativeEvent 属性来获取即可。合成事件与浏览器的原生事件不同，也不会直接映射到原生事件。例如，在 onMouseLeave 事件中 event.nativeEvent 将指向 mouseout 事件。每个 SyntheticEvent 对象都包含以下属性：

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type

React使用合成事件的原因：

• 进行浏览器兼容

• 避免垃圾回收

• 方便事件统一管理和事务机制

下面对比DOM2原生事件，演示几个Demo方便更好的理解，Demo 使用 "react": "^16.14.0" 来演示

父组件监听两个原生事件

export default class App extends Component {
  componentDidMount() {
    document.addEventListener("click", () => {
      console.log("document");
    });
    window.addEventListener("click", () => {
      console.log("window");
    });
  }
  render() {
    return (
      
        
      

    );   } }

1、原生事件

import { Component } from "react";
import "./index.css";
const getDom = (className) => {
  return document.querySelector(`.${className}`);
};
// 冒泡/捕获
const BUBBLING = false;
export default class Demo extends Component {
  state = {};
  componentDidMount() {
    const c1 = getDom("demo1-content1");
    const c2 = getDom("demo1-content2");
    const c3 = getDom("demo1-content3");
    c1.addEventListener(
      "click",
      () => {
        console.log(1);
      },
      BUBBLING
    );

    c2.addEventListener(
      "click",
      () => {
        console.log(2);
      },
      BUBBLING
    );

    c3.addEventListener(
      "click",
      () => {
        console.log(3);
      },
      BUBBLING
    );
  }
  render() {
    return (
      
        
 {
            this.setState({ show: !this.state.show });
          }}
          id="black-1"
        >
          demo1 原生事件
        
        
          1
          
            23

          

        

        {this.state.show && 

3-2-1-document-window

}       

    );   } }

输出结果是显而易见的，如图：

demo1

2、合成事件

import { Component } from "react";
import "./index.css";
export default class Demo extends Component {
  state = {};
  render() {
    return (
      
        
 {
            this.setState({ show: !this.state.show });
          }}
        >
          demo2 合成事件
        
        
 {
            console.log(1);
          }}
        >
          1
          
 {
              console.log(2);
            }}
          >
            2
            
 {
                console.log(3);
              }}
            >
              3
            
          
        
        {this.state.show && 
3-2-1-document-window
}