There are two ways to write react, one is a class component, also called a stateful component; the other is a functional component, also called a stateless component, and then introduces react hooks, and the functional component can also modify the state. The principle of event binding in these two components is the same, but the writing method is different. This article is mainly to record the event binding writing method in these two components.

1. Prerequisites

The key point is to record the difference in the use of event binding in the two components, so as to avoid confusion when using it next time. In the following writing method, there may be multiple writing methods in the same type of component, as long as you choose the one you like. It’s ok, there’s no need to know everything, as long as you can read and understand. If you want to use it directly, you can skip the principle and look at the use case. If you are interested in the principle, you can look back at the event principle. In react, events are written on+event type (the first letter is capitalized), such as click event (onClick), mouse event (onMouseOver, onMouseOut)

Second, the principle of event binding

The events in react are all synthetic events. React does not bind the click event to the real DOM of the div, but listens to all events at the document. When the event occurs and bubbles to the document, React will event The content is encapsulated and run by the real handler function. This method not only reduces memory consumption, but also uniformly subscribes and removes events when the component is pending destruction.

In addition, the event that bubbles up to the document is not a native browser event, but a synthetic event (SyntheticEvent) implemented by react itself. Therefore, if we don't want the event to bubble, it is invalid to call the event.stopProppagation() method. Instead, event.preventDefault() should be called.

(1) Event registration

When a component is updated or loaded, when adding a synthetic event to the dom, it is necessary to pass the added target to the document for judgment, and register the native event callback to the document as dispatchEvent (a unified event distribution mechanism).

(2) Event storage

EventPluginHub is responsible for managing the callback of React synthesis events. It stores the callback in the listenerBank, and also stores the Plugin responsible for the synthesis event. The Event is stored in the listenerbank. Each element will have a unique key in the listenerBank.

(3) Event-triggered execution

Bubbles into the document when clicked, triggers the callback dispatchEvent that registers the native event, obtains the deepest element that triggers the event, and executes the event using the batch processing mechanism of react.

(4) Synthetic events

Loop all types of eventPlugins, corresponding to each event type, generate different event pools, if it is empty, generate a new one, use the previous one, get the specified callback function according to the unique key, and then return the callback with parameters function.

(5) Overall process

-- > Component loading/updating

-- > add/delete event

-- > eventplugin added to ListenerBank to listen to events

-- > trigger event

-- > generate synthetic events

-- > Obtain the specified function through the unique key

--> Execute the specified callback function

-- > release after execution

3. Event use cases

(1) Event binding of class components

import React, { Component } from 'react'

export default class App1 extends Component {
    test2Fn() {
        console.log('test2');
    }
    test3Fn = () => {
        console.log('test3');
    }
    test4Fn = () => {
        console.log('test4');
    }
    render() {
        return (
            <div>
                {/* 直接写箭头函数，因为普通函数有this指向问题 */}
                <button onClick={() => { console.log('test1'); }}>第一种</button>
                {/* this.test2Fn()会被直接调用 和 this.test2Fn不一样*/}
                <button onClick={this.test2Fn}>第二种</button>
                <button onClick={this.test3Fn}>第三种</button>
                <button onClick={() => {
                    this.test4Fn()
                }}>第四种</button>

            </div>
        )
    }
}

Personally, I prefer the third way of writing

The first way of writing has disadvantages. It is inconvenient to watch when the logic is long, and it is not built into the dom.

The second type has the problem of this pointing, such as defining a=100, and getting through this.a in the second method will report an error, because this does not point to the App1 instance

It can be solved by this.test2Fn.bind(this), so that the two this points can be consistent

import React, { Component } from 'react'

export default class App1 extends Component {
    a=100  //添加一个全局变量
    test2Fn() {
        console.log('test2',this.a);
    }
    test3Fn = () => {
        console.log('test3',this.a);
    }
    test4Fn = () => {
        console.log('test4',this.a);
    }
    render() {
        return (
            <div>
                {/* 直接写箭头函数，因为普通函数有this指向问题 */}
                <button onClick={() => { console.log('test1',this.a); }}>第一种</button>
                {/* this.test2Fn()会被直接调用 和 this.test2Fn不一样*/}
                <button onClick={this.test2Fn.bind(this)}>第二种</button>
                <button onClick={this.test3Fn}>第三种</button>
                <button onClick={() => {
                    this.test4Fn()
                }}>第四种</button>

            </div>
        )
    }
}

this points to the modification

call: modify this point, and make the function execute automatically (without function () call)

apply: modify this point, and make the function execute automatically (without function () call)

bind: modify this point, need to be executed manually (call with ())

(2) Event binding of functional components

function App2(){
    const test=()=>{
        console.log("add");
    }
    return(
        <div >
            <button onClick={test}>add</button>
        </div>
    )
}
export default App2

react - event binding