This time I will show you what class definition components are in React, and what are the precautions for using class definition components in React. The following is a practical case, let's take a look.

Not long after I started learning React, I saw examples of using components of class in the teacher’s tutorial, but there were some conflicts with the information, which raised some questions:

• Do we need to define the constructor function constructor() in the class component?

• #Should props parameters be passed in to super()?

• #Should the binding event be performed in the constructor()?

Find information, summarized as follows:

Class components:

Define components canUse functionsDefinition components and class definition components ()

Let’s briefly talk about the difference between function definition components and class definition components:

• State cannot be used in function components, nor can the lifecycle methods of components be used;

• Function components are all display components, accepting props and rendering DOM;

• #There is no this in the function component, but it still needs to be bound in the class component Trivial things like this, such as: use this.props to replace props in the render() method;

• You can use local state state and Lifecycle methods.

Class definition component instance:

<span style="color: #000000">class GreetingInput extends React.Component{<br>//构造函数<br>    constructor(props){<br>        super(props);//将props传入到<a href="//m.sbmmt.com/code/12195.html" target="_blank">构造方法</a>中<br>        this.state={name:"Tom"};//初始化state的值<br>        this.switchName=this.switchName.bind(this);<br>    }<br>//自定义的switchName方法，用作事件处理<br>    switchName(){<br>       if(this.state.name==="Tom"){<br>          this.setState({name:"Jerry"});//修改state的值<br>        }else{<br>          this.setState({name:"Tom"});<br>        }<br>   } <br>//render方法  渲染在UI上的内容<br>   render(){<br>      return(<br>        <p><br>          <h1>hello,{this.state.name}</h1><br>          <button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button><br>        </p><br>      );<br>   }<br>}   <br>ReactDOM.render(<br>  <GreetingInput/>,document.getElementById("root")<br>);</span>

Question 1: Should the constructor be defined in the class component? )?

The concept of class is new in ES6. A class must have a constructor method. If there is no explicit definition in the class, an empty constructor method will be added by default;

Generally, state and binding events need to be initialized in the constructor. Therefore, when state or binding events need to be initialized, the constructor method needs to be explicitly defined and state is initialized in the constructor method. And binding events

Question 2: Do I need to pass in props parameters in super()?

First of all, if the constructor method is explicitly declared, super must be called, that is, only when there is a constructor method, super must be called

I encountered some examples where there is no parameter props passed in super(). How to use super() and super(props)?

React will automatically set props anywhere in the component except the constructor method. Therefore, when using props in the non-constructor method of the component, you do not need to pass it in. , used directly,

But When you want to use props in the constructor, you must pass the props into super, so that Props are accessed in the constructor, otherwise they don’t need to be passed in.

Question 3: Should the binding event be performed in the constructor()?

As mentioned earlier, events generally need to be bound in the constructor, but bind needs to be used. If you do not want to call bind, you can also use the following method:

1. Using the arrow function initialization method, the above example becomes:

class GreetingInput extends React.Component{//构造函数方法    
constructor(props){
        super(props);        
        this.state={name:"Tom"};
        
    }//自定义的switchName方法，用作事件处理   下边用的是属性初始化语法
    switchName=()=>{       
    if(this.state.name==="Tom"){          
    this.setState({name:"Jerry"});
        }else{          
        this.setState({name:"Tom"});
        }
   } 
//render方法  渲染在UI上的内容   
render(){      
return(        
<p>
          <h1>hello,{this.state.name}</h1>
          <button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
        </p>      );
   }
}   
ReactDOM.render(  <GreetingInput/>,document.getElementById("root")
);

The this pointer in the function points to the function itself. Therefore, in the constructor of the class, you need Bind the event function to an instance of this class

但箭头函数里的this指针，指向其拥有者，也就是class ，因此一个简易的方式是，在类中尽可能使用箭头函数定义函数

2、在回调函数中使用箭头函数

class GreetingInput extends React.Component{//构造函数方法    
constructor(props){
        super(props);        
        this.state={name:"Tom"};
        
    }//自定义的switchName方法，用作事件处理    
    switchName(){       
    if(this.state.name==="Tom"){          
    this.setState({name:"Jerry"});
        }else{          
        this.setState({name:"Tom"});
        }
   } 
//render方法  渲染在UI上的内容   使用下边这个语法  有个问题就是每次switchName 渲染的时候都会创建一个不同的回调函数   
render(){      
return(        
<p>
          <h1>hello,{this.state.name}</h1>
          <button onClick={(e) => this.switchName(e)}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
        </p>      );
   }
}   
ReactDOM.render(  <GreetingInput/>,document.getElementById("root")
);

注意：当回调函数作为一个属性值传入低阶组件，上述这种方法可能会进行额外的重新渲染。

我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

正则表达式怎么在字符串中提取数字

Vue.js的表单输入绑定
Reactive Form的自定义验证器

The above is the detailed content of What classes define components in React. For more information, please follow other related articles on the PHP Chinese website!