Details react: four methods for event binding this, and four reactthis Methods

Details react: four methods for event binding this, and four reactthis Methods

In the react component, the context of each method points to the instance of the component, that is, this is automatically bound to the current component, and react will cache this reference, to maximize the cpu and memory. When es6 class or pure function is used, this automatic binding will no longer exist. We need to manually implement this binding.

React event binding is similar to DOM Event binding. The differences are as follows:

1. The React event is named by the hump method, and the DOM event name is lowercase.

2. Use jsx to pass a function as event handler instead of a string.

3. The React event cannot be blocked by returning false. You need to explicitly call preventDefault ()

Example:

<a href="#" onclick="console.log('The link was clicked.'); return false">Click me</a>class ActionLink extends React.Component {constructor(props) {super(props);}handleClick(e) {e.preventDefault();console.log('The link was clicked.');}render() {return (<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>);}}

Ps: The React component class method does not bind this to the component instance by default. You need to manually bind this to the component instance.

The following are several binding methods:

Bind Method

Bind directly is bind (this), but the problem is that every rendering rebinds the bind;

class Home extends React.Component { constructor(props) {  super(props);  this.state = {  }; } del(){  console.log('del') } render() {  return (   <div className="home">    <span onClick={this.del.bind(this)}></span>   </div>  ); }}

Bind within the constructor

Bind this to the constructor of the constructor. The advantage is that the constructor only needs to be bound once to avoid re-binding during each rendering. The function does not need to be re-bound when it is re-used elsewhere.

class Home extends React.Component { constructor(props) {  super(props);  this.state = {  };  this.del=this.del.bind(this) } del(){  console.log('del') } render() {  return (   <div className="home">    <span onClick={this.del}></span>   </div>  ); }}

: Parameters cannot be passed.

If you do not specify a parameter, you can use double colons.

class Home extends React.Component { constructor(props) {  super(props);  this.state = {  }; } del(){  console.log('del') } render() {  return (   <div className="home">    <span onClick={::this.del}></span>   </div>  ); }}

Arrow function binding

The arrow function is not only the 'syntactic tang' of the function, but also automatically bound to this that defines the function scope, because we do not need to bind them:

class Home extends React.Component { constructor(props) {  super(props);  this.state = {  }; } del=()=>{  console.log('del') } render() {  return (   <div className="home">    <span onClick={this.del}></span>   </div>  ); }}

The above methods can achieve this binding and use their own habits. I hope it will be helpful for everyone's learning, and I hope you can support the house of helping customers a lot.