How to describe react's synthetic events

React synthetic event is an event object that React can simulate all the capabilities of native DOM events, that is, a cross-browser wrapper for browser native events; it defines synthetic events according to W3C specifications, is compatible with all browsers, and has The same interface as browser native events. In React, all events are synthetic and not native DOM events, but DOM events can be obtained through the "e.nativeEvent" property.

#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

1. What is a synthetic event

React is browser-based The event mechanism itself implements a set of event mechanisms, including event registration, event synthesis, event bubbling, event dispatch, etc.

In React, this set of event mechanisms is called synthetic events

SyntheticEvent

React SyntheticEvent is an event object that React simulates all the capabilities of native DOM events, that is, cross-browsing of browser native events device wrapper. It defines synthetic events according to the W3C specification, is compatible with all browsers, and has the same interface as browser native events. For example

const button = <button onClick={handleClick}>按钮</button>

In React, all events are synthetic and not native DOM events, but DOM events can be obtained through the e.nativeEvent property. For example:

const handleClick = (e) => console.log(e.nativeEvent);;
const button = <button onClick={handleClick}>按钮</button>

As you can see from the above, React events and native events are very similar, but there are also certain differences:

• The event name naming method is different

// 原生事件绑定方式
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件绑定方式
const button = <button onClick={handleClick}>按钮命名</button>

• The event handler function is written differently

// 原生事件 事件处理函数写法
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>按钮命名</button>

Although onclick seems to be bound to the DOM element, it actually does not Bind the event proxy function directly to the real node, but bind all events to the outermost layer of the structure and use a unified event to listen. [Related recommendations: Redis Video Tutorial, Programming Tutorial]

This event listener maintains a mapping to save the event listening and processing functions inside all components. When a component is mounted or unmounted, just insert or remove some objects on this unified event listener.

When an event occurs, it is first processed by this unified event listener, and then the real event processing function is found in the mapping and called. This simplifies the event processing and recycling mechanism, and greatly improves efficiency.

2. Execution Sequence

Regarding the execution sequence of React synthetic events and native events, you can take a look at the following example:

import  React  from 'react';
class App extends React.Component{

  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    console.log("React componentDidMount！");
    this.parentRef.current?.addEventListener("click", () => {
      console.log("原生事件：父元素 DOM 事件监听！");
    });
    this.childRef.current?.addEventListener("click", () => {
      console.log("原生事件：子元素 DOM 事件监听！");
    });
    document.addEventListener("click", (e) => {
      console.log("原生事件：document DOM 事件监听！");
    });
  }
  parentClickFun = () => {
    console.log("React 事件：父元素事件监听！");
  };
  childClickFun = () => {
    console.log("React 事件：子元素事件监听！");
  };
  render() {
    return (
      <div ref={this.parentRef} onClick={this.parentClickFun}>
        <div ref={this.childRef} onClick={this.childClickFun}>
          分析事件执行顺序
        </div>
      </div>
    );
  }
}
export default App;

The output sequence is:

原生事件：子元素 DOM 事件监听！ 
原生事件：父元素 DOM 事件监听！ 
React 事件：子元素事件监听！ 
React 事件：父元素事件监听！ 
原生事件：document DOM 事件监听！

The following conclusions can be drawn:

• React all events are mounted on the document object

• When the real DOM When an element triggers an event, it will bubble up to the document object and then process the React event

• So the native event will be executed first and then the React event

• Finally actually execute the event mounted on the document

The corresponding process is as shown in the figure:

So I want to block different times The bubbling behavior of the segment uses different methods, as follows:

• To prevent bubbling between synthetic events, use e.stopPropagation()

• To prevent the bubbling of synthetic events and events on the outermost document, use e.nativeEvent.stopImmediatePropagation()

• to prevent the synthetic events from bubbling except on the outermost document. Bubbling on native events can be avoided by judging e.target

document.body.addEventListener('click', e => {   
    if (e.target && e.target.matches('div.code')) {  
        return;    
    }    
    this.setState({   active: false,    });   }); 
}

3. Summary

The React event mechanism is summarized as follows:

• Events registered on React will eventually be bound to the DOM of the document, rather than the DOM corresponding to the React component (memory overhead is reduced because all events are bound to the document, other nodes No bound events)

• React itself implements a set of event bubbling mechanisms, so this is why our event.stopPropagation() is invalid.

• React traces back from the triggered component to the parent component through a queue, and then calls the callback defined in their JSX

• React has a set Your own synthetic event SyntheticEvent

(Learning video sharing: Basic Programming Video)

The above is the detailed content of How to describe react's synthetic events. For more information, please follow other related articles on the PHP Chinese website!