Your location:Tech News>News>Script>Several methods React learning event binding contrast

Latest News

Several methods React learning event binding contrast

Author:fsadmin

Views:

  Foreword

  This article to tell you about several ways React bound events related to it glory contrast, learning to share for your reference, the following did not talk much to say, to see a detailed description with it.

  React event binding

  Since the default method of the class will not bind this, so when the call if you forget to value binding, this would be undefined.

  If it is not usually called directly, it should be bound to this method.Binding in the following ways:

  1. Use bind bind this in the constructor

  class Button extends React.Component {

  constructor (props) {

  super (props);

  this.handleClick = this.handleClick.bind (this);

  }

  handleClick () {

  console.log ( ''this is:'', this);

  }

  render () {

  return (

  

  );

  }

  }

  2. When this binding using the bind call

  class Button extends React.Component {

  handleClick () {

  console.log ( ''this is:'', this);

  }

  render () {

  return (

  

  );

  }

  }

  3. Use the arrow at the time of the call function to bind this

  class Button extends React.Component {

  handleClick () {

  console.log ( ''this is:'', this);

  }

  render () {

  return (

  

  );

  }

  }

  4. Use attribute initialization syntax to bind this (experimental)

  class Button extends React.Component {

  handleClick = () => {

  console.log ( ''this is:'', this);

  }

  render () {

  return (

  

  );

  }

  }

  Compare

  Modes 2 and 3 are in the time of the call and then bind this.

  Advantages: simple wording, when the state of the component when there is no need to add it to bind this class constructor

  Disadvantages: each call to the method will generate a new instance, and therefore affect performance, and when the property value as a function of the incoming low-level components, these components may be additional re-rendered, because each time as an example of the new method of transmitting a new attribute.

  In this way, when a binding class constructor, do not need to call bind

  Advantages: only generate a instance method, bindings and then used many times if one does not need to be bound with this method.

  Cons: Even without the state, but also need to add a class constructor to bind this, the amount of code a little more...

  Mode 4: Using attribute initialization syntax, the method is initialized to the arrow function, so when it is bound to create a function of this.

  Pros: Create a method to bind this, you do not need to bind the class constructor call when not needed to be binding.The combined mode 1, mode 2, mode 3 has the advantage

  Disadvantages: currently still experimental grammar, translation required by babel

  to sum up

  Mode 1 is the official recommended way binding, is the best way to performance.3 will affect the performance time and the manner and mode 2 when passed as an attribute to the method of the subassembly resulting in severe problems rendered.Mode 4 is currently an experimental grammar, but it is the best way binding, it requires a combination of bable translation

  Well, that''s the entire contents of this article, we hope the contents of this paper to learn or work can bring some help, if in doubt you can leave a message exchange, thank you for the support scripts House.

  You may also be interested in the article: JSX grammar learning introductory tutorial React JavaScript framework in the React how elegant handle incident response Detailed React.Js adding and removing onScroll Detailed Explanation react event of a binding event on the four-way assembly React pass parameters to achieve this event sample code React Tab handover event bubbling prevent problems detailed analysis learning event throttled by way of example React the method of image stabilization react + antd + Redux achieve Upcoming events react learning mechanisms and principles of event processing notes (b) react event handling react learning JSX event and react Case study

Recommend article

Relate article