Preface
This article mainly introduces relevant content about React processing incident response. It is shared for your reference and learning. Let’s take a look at the detailed introduction below.
Define a component in React, which can be used throughOr the class of ES6. The React components discussed in this article are components based on class definitions. Using class method, the code structure is clearer and readable, and React official also recommends using this method to define components.
Handling incident responses is a very important part of web applications. In React, there are many ways to handle event responses.
1. Use arrow function
First upload the code:
//Code 1class MyComponent extends {
render() {
return (
<button onClick={()=>{('button clicked');}}>
Click
</button>
);
}
}
When the event response logic is relatively complicated, writing all the logic directly in the braces of onClick will cause the render function to become bloated, and it is not easy to intuitively see the element structure of the component rendered. At this time, you can encapsulate the logic into a method of the component, and then call this method in the arrow function.
As shown below:
//Code 2class MyComponent extends {
constructor(props) {
super(props);
= {number: 0};
}
handleClick() {
({
number: ++
});
}
render() {
return (
<div>
<div>{}</div>
<button onClick={()=>{();}}>
Click
</button>
</div>
);
}
}
The biggest problem with this approach is that every time the render call is called, an event's callback function will be recreated, which brings additional performance overhead. The lower the component's level, the greater the overhead, because any changes in the upper component may trigger the render method of this component. Of course, in most cases, this performance loss is not necessary to be concerned. This method also has an advantage, that is, there is no need to consider this pointing problem, because this writing ensures that this in the arrow function always points to the current component.
2. Methods for using components
The code first:
//Code 3class MyComponent extends {
constructor(props) {
super(props);
= {number: 0};
= (this);
}
handleClick() {
({
number: ++
});
}
render() {
return (
<div>
<div>{}</div>
<button onClick={}>
Click
</button>
</div>
);
}
}
The advantage of this approach is that every time you render, a callback function is not recreated, without additional performance losses. It should be noted that in this way, you need to bind this to the event callback function in the constructor: = (this), otherwise this in handleClick is undefined. This is because of ES6 syntax. The methods on objects constructed by ES6 Class are not bound to this by default, and we need to bind them manually. Isn't it a bit painful to bind this manually every time? OK, let's look at the next approach.
3. Property initializer syntax
Using ES7's property initializers, the code can be written like this:
//Code 4class MyComponent extends {
constructor(props) {
super(props);
= {number: 0};
}
handleClick = () => {
({
number: ++
});
}
render() {
return (
<div>
<div>{}</div>
<button onClick={}>
Click
</button>
</div>
);
}
}
Haha, you no longer have to manually bind this. But you need to know that this feature is still in the experimental stage and is not supported by default. If you are using official scaffoldingCreate React AppThis feature is supported by default for the created application. You can also introduce babel in your projecttransform-class-propertiesPlugins get support for this feature.
4. The issue of passing parameters of callback function
The event callback function will be passed into an event object Event as a parameter by default. What should I do if I want to pass in other parameters to the callback function?
It is very simple to use the first method, just pass it directly:
//Code 5class MyComponent extends {
constructor(props) {
super(props);
= {
list: [1,2,3,4],
current: 1
};
}
handleClick(item,event) {
({
current: item
});
}
render() {
return (
<ul>
{(
(item)=>(
<li className={ === item ? 'current':''}
onClick={(event) => (item, event)}>{item}
</li>
)
)}
</ul>
);
}
}
If you use the second method, you can delay the operation of binding this to render, and bind additional parameters while binding this:
//Code 6class MyComponent extends {
constructor(props) {
super(props);
= {
list: [1,2,3,4],
current: 1
};
}
handleClick(item) {
({
current: item
});
}
render() {
return (
<ul>
{(
(item)=>(
<li className={ === item ? 'current':''}
onClick={(this, item)}>{item}
</li>
)
)}
</ul>
);
}
}
Using the third method, the solution is basically the same as the second:
//Code 7class MyComponent extends {
constructor(props) {
super(props);
= {
list: [1,2,3,4],
current: 1
};
}
handleClick = (item) => {
({
current: item
});
}
render() {
return (
<ul>
{(
(item)=>(
<li className={ === item ? 'current':''}
onClick={(undefined, item)}>{item}
</li>
)
)}
</ul>
);
}
}
However, this method is a bit useless, because although you don't need to bind this through the bind function, you still have to use the bind function to bind other parameters.
There is another point to pay attention to about the callback function of event response. Regardless of whether you explicitly declare the event parameter Event in the callback function, React will pass the event Event as a parameter to the callback function, and the position of the parameter Event is always behind other custom parameters. For example, in code 6 and code 7, although the Event parameter is not declared in the handleClick parameter, you can still passarguments[1]Get the event Event object.
Summarize
There are three ways to bind event callbacks. The first one has additional performance losses; the second one requires manual binding this, and the amount of code increases; the third one uses the features of ES7, which is not currently supported by default, and requires support from the Babel plug-in, but the writing method is the simplest and there is no need to manually bind this. The second and third methods are recommended.
Okay, the above is the entire content of this article. I hope the content of this article will be of some help to everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.