Dieses Mal zeige ich Ihnen, welche Klassendefinitionskomponenten in React vorhanden sind und welche Vorsichtsmaßnahmen für die Verwendung von Klassendefinitionskomponenten in React gelten. Das Folgende ist ein praktischer Fall. Schauen wir uns das an.
Kurz nachdem ich angefangen hatte, React zu lernen, sah ich im Tutorial des Lehrers ein Beispiel für die Verwendung von Komponenten des Unterrichts , aber es gab einige Konflikte mit den Informationen, die einige Fragen aufwarfen :
Sollten wir den constructorconstructor() in der Klassenkomponente definieren?
Muss ich den props-Parameter in super() übergeben?
Soll das Bindungsereignis im Konstruktor() ausgeführt werden?
Informationen finden Sie wie folgt zusammengefasst:
Klassenkomponente:
Um eine Komponente zu definieren, können Sie Funktionen verwenden, um Komponenten und Klassendefinitionskomponenten () zu definieren
Lassen Sie uns kurz über den Unterschied zwischen Funktionsdefinitionskomponenten und Klassen sprechen Definitionskomponenten:
Zustand kann nicht in Funktionskomponenten verwendet werden, noch kann die Lebenszyklusmethode der Komponente verwendet werden;
-
Funktionskomponenten sind alle Präsentationskomponenten, die Requisiten akzeptieren und DOM rendern
Das gibt es nicht in Funktionskomponenten, aber es muss immer noch in Klassenkomponenten gebunden werden. Triviale Dinge wie diese, wie zum Beispiel: Verwenden Sie this.props, um props in der render()-Methode zu ersetzen > Sie können lokale Status- und Lebenszyklusmethoden verwenden.
Klassendefinitionskomponenteninstanz:
Frage 1: Müssen Sie einen Konstruktor in a definieren? Klassenkomponente? Konstruktor()?
<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>Nach dem Login kopieren
ES6 hat ein neues Klassenkonzept. Eine Klasse muss eine Konstruktormethode haben. Wenn es keine explizite Definition in der Klasse gibt, wird standardmäßig eine leere Konstruktormethode hinzugefügt >
Im Allgemeinen müssen Zustands- und Bindungsereignisse im Konstruktor initialisiert werden. Wenn daher Zustands- oder Bindungsereignisse initialisiert werden müssen, muss die Konstruktormethode explizit definiert und der Zustand
initialisiert werden in der Konstruktormethode. und Bindungsereignisse
Frage 2: Sollten Requisitenparameter an
super() übergeben werden?
Wenn die Konstruktormethode explizit deklariert ist, muss super aufgerufen werden. Das heißt, nur wenn eine Konstruktormethode vorhanden ist, muss super aufgerufen werden
Wieder einmal bin ich auf einige Beispiele gestoßen, in denen in super() kein Parameter props übergeben wurde. Wie verwende ich super() und super(props)?
React setzt Requisiten automatisch an einer beliebigen Stelle in der Komponente, mit Ausnahme der Konstruktormethode. Wenn Sie Requisiten in der Nicht-Konstruktormethode der Komponente verwenden, tun Sie dies daher nicht Sie müssen es übergeben. , direkt verwenden,
Aber Wenn Sie Requisiten im Konstruktor verwenden möchten, müssen Sie die Requisiten an Super übergeben , damit im Konstruktor auf Props zugegriffen wird, andernfalls müssen sie nicht übergeben werden.
Frage 3: Soll das Bindungsereignis im Konstruktor() ausgeführt werden? Wie bereits erwähnt, müssen Ereignisse im Allgemeinen im Konstruktor gebunden werden, Sie müssen jedoch bind verwenden. Wenn Sie bind nicht aufrufen möchten, können Sie auch die folgende Methode verwenden :
1. Unter Verwendung der Pfeilfunktionsinitialisierungsmethode wird das obige Beispiel zu:
Der Zeiger „this“ in der Funktion zeigt auf die Funktion selbst, daher muss im Konstruktor der Klasse die Ereignisfunktion an eine Instanz dieser Klasse gebunden werden
但箭头函数里的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")
);Nach dem Login kopieren
注意：当回调函数作为一个属性值传入低阶组件，上述这种方法可能会进行额外的重新渲染。
我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
正则表达式怎么在字符串中提取数字
Vue.js的表单输入绑定
Reactive Form的自定义验证器
Das obige ist der detaillierte Inhalt vonWelche Klassen definieren Komponenten in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
