Cette fois, je vais vous montrer quels sont les composants de définition de classe dans React et quelles sont les précautions à prendre pour utiliser les composants de définition de classe dans React. Ce qui suit est un cas pratique, jetons un coup d'œil.
Peu de temps après avoir commencé à apprendre React, j'ai vu un exemple d'utilisation de composants de classe dans le tutoriel de l'enseignant, mais cela était en conflit avec les informations, ce qui a soulevé quelques questions :
Faut-il définir le constructorconstructor() dans le composant de classe ?
Dois-je passer le paramètre props dans super() ?
L'événement de liaison doit-il être effectué dans le constructeur() ?
Rechercher des informations, résumées comme suit :
Composante de classe :
Pour définir un composant, vous pouvez utiliser des fonctions pour définir des composants et des composants de définition de classe ()
Parlons brièvement de la différence entre les composants de définition de fonction et la classe composants de définition :
L'état ne peut pas être utilisé dans les composants de fonction, et la méthode cycle de vie du composant ne peut pas non plus être utilisée ;
Les composants de fonction sont tous des composants de présentation, acceptant les accessoires et rendant le DOM
Il n'y a pas de ceci ; dans les composants de fonction, mais il doit toujours être lié aux composants de classe Des choses triviales comme celle-ci, telles que : utilisez this.props pour remplacer les accessoires dans la méthode render()
Vous pouvez utiliser les méthodes d'état local et de cycle de vie.
Instance de composant de définition de classe :
<span style="color: #000000">class GreetingInput extends React.Component{<br>//构造函数<br> constructor(props){<br> super(props);//将props传入到<a href="http://www.php.cn/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>Copier après la connexion
Question 1 : Avez-vous besoin de définir un constructeur dans un composant de classe ? constructeur() ?
ES6 a un nouveau concept de classe. Une classe doit avoir une méthode constructeur. S'il n'y a pas de définition explicite dans la classe, une méthode constructeur vide sera ajoutée par défaut ; >
Généralement, les événements d'état et de liaison doivent être initialisés dans le constructeur. Par conséquent, lorsque les événements d'état ou de liaison doivent être initialisés, la méthode du constructeur doit être explicitement définie et l'état
initialisé. dans la méthode constructeur. et les événements de liaison Question 2 : Les paramètres des accessoires doivent-ils être transmis dans
super() ?
Tout d'abord, si la méthode constructeur est explicitement déclarée, super doit être appelé, c'est-à-dire que seulement lorsqu'il existe une méthode constructeur, super doit être appelé
Encore une fois, j'ai rencontré des exemples dans lesquels super() n'était pas passé en paramètre props. Comment utiliser super() et super(props) ?
React définira les accessoires n'importe où dans le composant, à l'exception de la méthode constructeur. Par conséquent, lorsque vous utilisez des accessoires dans la méthode non constructeur du composant, ce n'est pas nécessaire. pour passer , utilisez-le directement,
mais lorsque vous souhaitez utiliser des props dans le constructeur, vous devez passer les props en super , afin que les accessoires soient accessibles dans le constructeur, sinon ils n'ont pas besoin d'être transmis.
Question 3 : L'événement de liaison doit-il être effectué dans le constructeur() ?
Comme mentionné précédemment, les événements doivent généralement être liés dans le constructeur, mais vous devez utiliser bind Si vous ne souhaitez pas appeler bind, vous pouvez également utiliser la méthode suivante. :
1. En utilisant la méthode d'initialisation de la fonction flèche, l'exemple ci-dessus devient :
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")
);Copier après la connexion
Le pointeur this dans la fonction pointe vers la fonction elle-même, donc dans le constructeur de la classe, la fonction événementielle doit être liée à une instance de cette classe
但箭头函数里的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")
);Copier après la connexion
注意：当回调函数作为一个属性值传入低阶组件，上述这种方法可能会进行额外的重新渲染。
我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
正则表达式怎么在字符串中提取数字
Vue.js的表单输入绑定
Reactive Form的自定义验证器
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
