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="//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>

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

super() übergeben 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:

但箭头函数里的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的自定义验证器

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!