What is the difference between react events and native events?

The difference between react events and native events is: events in react are bound to the document; while native events are bound to the dom. In terms of binding, events on the DOM have priority over events on the document. The event object of react is a synthetic object, not a native one.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is the difference between react events and native events?

Events in react are bound to the document,

And native events are bound to the dom.

Therefore, relative to the binding place, events on the dom have priority over events on the document.

What is an event?

First of all, JS is to implement some dynamic operations, and users sometimes want to implement some functions, such as submitting forms, mouse clicks, etc., so they must trigger this event in the browser, and then The browser will sense (or capture) the user's behavior and respond to the event. This is called an event.

What is an event object?

When the system calls the handler, it encapsulates all the information about the event into an object, and then passes it to the event handler as a parameter, and this object is the event object. In native functions, you often see an event, and this thing is what we call the event object.

react has the following advantages in event processing:

• Almost all events are delegated to the document to achieve performance optimization.

• For each type of event, the event is distributed uniformly using the dispatch function (dispatchEven)

• The event object (event) is a synthetic object ( syntheticEvent), not a native

React synthetic event

Why is it abstracted into a synthetic event?

If all event handling functions are bound to the DOM, it will be affected when the page responds, causing the page to be very slow. In order to avoid the abuse of such DOM events and shield the system differences between different browser events at the bottom layer, react implements a middle layer - syntheticEvent

Principle

In react, if you need to bind an event, you will usually write it in JSX like this:

<div onClick={this.onClick}>我是react点击事件</div>

But in react, the click event is not actually bound to the DOM of the div, but to the DOM of the div. Set on DOCUMENT, when an event occurs and bubbles to the document, react will hand over the content of the event to the corresponding function for processing

How to use it in react Native events

Although react encapsulates almost all native events, for example:

After Modal is opened, clicking on other blank areas requires closing Modal

Introducing some Third-party libraries that implement native events, and when they need to interact with each other

and other scenarios, native events have to be used for business logic processing.

Since native events need to be bound to the real DOM, they are usually bound during the componentdidmout/ref function execution phase.

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        
    }
    render () {
        return <div>demo</div>
    }
}

Mixed use of native events and synthetic events

If you need to mix native events and synthetic events in a business scenario, then during use, you need to Pay attention to the following points:

Sequence of response

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        console.log('dom event!')
    }
    onReactClick = (e) => {
        console.log('react event!')
    }   
    render () {
        return <div onClick={this.onReactClick}>demo</div>
    }
}

Result output:

dom event! react event!

Cause analysis: First of all, we know that native events are bound to the DOM, and synthetic events It is bound to the document, so if the event on the DOM bubbles up first, it will be executed first, and then bubbles up to the document before the synthetic event is executed.

Recommended learning: "react video tutorial 》

The above is the detailed content of What is the difference between react events and native events?. For more information, please follow other related articles on the PHP Chinese website!