Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "the method of this binding in React". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When we develop react projects, we usually encounter problems with this binding. The solutions are summarized into the following three situations:

Import React from 'react'export default class Demo extends React.Component {constructor (props) {super (props); this.click1.bind (this) / / method 1: bind} click1 () {} click2= () = > {/ / Mode 2: use the arrow function} click3 () {} render () {/ / Mode 3: bind return within render

}}

All three methods can achieve the same effect, but there is still a big difference in performance.

First of all, the third way has the worst performance, binding this every time you render.

For the second and third, we don't really see the difference this way, but if we compile the code to ES5, we can see the difference:

First of all, the way to use the arrow function, which is actually defined on the this, that is, after each instantiation of the this will define the method, but through way 1, the way is actually defined on the prototype, each instance object shares the method. Therefore, mode 1 is actually the best in terms of memory space consumption.

But for a method defined on the prototype chain, when the method is actually called, the process of finding it is as follows:

First check whether there is a definition of the method on the this, and if not, go to the prototype to see if the method exists, so you will go through a lookup across the prototype chain during the method call. This process is the additional consumption caused by method 1.

But in the way the arrow function is actually called, it accesses the outer cache of _ this, so there is a layer of consumption in scope lookup.

After private testing, it is found that the performance of lookup on the prototype chain is much better than that on the domain. So on the whole, the second way is the best.

In addition, a batch binding method has been found in the foreigner's code, which is actually an optimization of solution 1, which can be used for reference:

This is the end of the content of "this binding methods in React". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.