Reasons and analysis of function calls and bind this in react

Regarding the reasons for function calls () and bind this

The following content is mainly based on onClick's callback function solution

Official documentation explains jsx callback function

• For this in JSX callback function, in JavaScript, the class method will not bind this by default.
• If you forget to bind and pass it into onClick, the value of this is undefined when you call this function.

//Function components are stateless components that are only responsible for data display (static)//Class component This is a stateful component. Responsible for updating the ui to make the page move//State (state) is data, which is private data inside the component and can only be used inside the component//The value of state is an object, that is, a component can have multiple data inside itclass StateComponent extends {
  //Use es6 to simplify the initialization method  //state={
  //  count:0
  //}
   constructor(props) {
    super(props);
     = {count: 0};
    this.addClick3 = this.(this);
  }
  addClick(){
    ({count :  + 1});
  }
  addClick2=()=>{
    ({count :  + 1});
  }
  addClick3(){
    ({count :  + 1});
  }
  render(){
    return(
      <>
    <button onClick={()=>{
      ({
        count: +1
      })
    }}>Stateful Components,{}</button>

    <button onClick={(this)} >Not usedconstructor，Using commentses6Simplified writing</button>
    <button onClick={()=>()} >Arrow function use</button>
    <button onClick={this.addClick2} >Use arrow functions</button>
    <button onClick={this.addClick3} >constructorYou can use it after binding</button>
    </>
    )
  }
}

Since I'm learning js and react frameworks, I have some questions about function calls in jsx interpolation expressions

function check(){
}

1. Some interpolation expressions call functions do not need to use (), such as {check}; but some places call require (), such as {check()}

2. When using the onClick function in react, call the function. If this is not used inside the function, you can directly call {check}; if this is used, special processing is required, as shown in the top code.

Answer 1

Use jsx interpolation expressions directly in the interface. If you want to directly return the function result, you need to use {check()}; if you do not need to call the function directly, you wait for some trigger conditions before calling the function {check}. Here the function () is the function call, and the function name is a pointer to the function body.

React official website can well see the difference in () for answers to the following questions

Why does my function get called every time the component renders?

Make sure you do not call this function when you pass a function to the component:

hadleClick(){
 return <div>hello world</div>
 //This is not used inside the function body}

render() {
  // Wrong: handleClick is called instead of passed as a reference!
  return <button onClick={()}>Click Me</button>
}

The correct way is to pass the function itself (without parentheses):

render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={}>Click Me</button>
}

Answer 2

js itself has a feature. If you call the function directly, it can be used normally even if this is used internally. However, if the function content uses this but does not call this function directly, this internally will be lost and this will become undefined.

Therefore, in the following code, renderList() is called directly and {()} is used. Although this is used inside the function body, it does not require special processing.

But onClick is not called directly. The onClick here is equivalent to an intermediate amount.

This pointer inside the function body will be lost.

class Comment extends {
    state={
         comments:[
            {id:1,name:'jack',comment:"sofa"},
            {id:2,name:"tom",comment:'The sofa is good'},
            {id:3,name:"blue",comment:"good"}
         ]
    }
    renderList(){
        return(
            ===0?
                <div className="no-comment" >no comments，Go and comment</div>:
                <ul >
              {&&(comment=>
                  <li key={}><h3>Commenter:{}</h3>
                  <p>Comment content :{}</p>
                  </li>
              )} 
               </ul>
              
        )
    }
      render(){
        return(
            <>
            {()}
             </>
        )
      }

}

This loss can be solved using arrow functions, because arrow functions have the following characteristics:

When using an arrow function, the arrow function will bind the value of this outer layer by default for us to bind the value of this outer layer, so the value of this in the arrow function is the same as that of this outer layer.

Therefore, you can avoid the loss of this by using the arrow function. Of course, there are many ways to avoid the loss of this.

1. Use es5 syntax, use constructor when initializing component to bind the function

2. Use bind(this) to bind when declaring intermediate volumes

3. When declaring functions in intermediate quantities, you can directly call the function; or write the function content directly into the arrow function (note that function name + () is required when making function calls here, because declaration inside the function is called directly)

4. The most common way is to declare the function using arrow functions, which can be called directly without additional processing.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.