Über drei Möglichkeiten zum Erstellen von Komponenten in React und ihre Unterschiede

In diesem Artikel werden hauptsächlich die drei Möglichkeiten zum Erstellen von Komponenten in React und ihre Unterschiede vorgestellt. Er hat einen gewissen Referenzwert.

Nachdem React gestartet wurde, erschienen nacheinander drei Definitionen Verschiedene Gründe. Die Methoden der Reaktionskomponenten haben das gleiche Ziel; es gibt drei spezifische Methoden:

• Funktional definierte zustandslose Komponenten

• es5 native Methode React.createClass Die definierte Komponente

• es6-Formular erweitert React.Component Die definierte Komponente

Obwohl es drei Möglichkeiten gibt, Reaktionskomponenten zu definieren Diese drei Was ist der Unterschied zwischen diesen beiden Arten der Komponentendefinition? Mit anderen Worten: Warum erscheinen entsprechende Definitionen? Lassen Sie uns es im Folgenden kurz vorstellen.

Zustandslose Funktionskomponenten

Die Erstellung zustandsloser Funktionskomponenten begann in React-Version 0.14. Es wird verwendet, um reine Anzeigekomponenten zu erstellen, die nur für die Anzeige basierend auf den eingehenden Requisiten verantwortlich sind und keine Zustandsoperationen beinhalten. Spezifische zustandslose Funktionskomponenten, wies der Beamte darauf hin:

In den meisten React-Codes sind die meisten Komponenten als zustandslose Komponenten geschrieben, die durch einfache Kombination in andere Komponenten eingebaut werden können. Dies geschieht durch mehrere A-Designmuster Es wird empfohlen, einfach zu sein und dann zu einer großen Anwendung zusammenzuführen.

Eine zustandslose Funktionskomponente wird formal als Komponentenklasse mit nur einer Rendermethode dargestellt. Sie wird in Form einer Funktion oder ES6-Pfeilfunktion erstellt und die Komponente ist zustandslos. Die spezifische Erstellungsform lautet wie folgt:

function HelloComponent(props, /* context */) {
 return <p>Hello {props.name}</p>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

Die Erstellungsform zustandsloser Komponenten macht den Code lesbarer und reduziert eine Menge redundanten Codes, wodurch er rationalisiert wird. Es gibt nur eine Rendermethode, die den Komfort beim Schreiben einer Komponente erheblich verbessert. Darüber hinaus weisen zustandslose Komponenten die folgenden bemerkenswerten Funktionen auf:

Die Komponente wird nicht instanziiert wird verbessert

Da die Komponente in eine Funktion der Rendermethode vereinfacht wird, wird die zustandslose Komponente im Prozess der Komponente nicht instanziiert Es muss überschüssiger Speicher zugewiesen werden, sodass die Leistung bis zu einem gewissen Grad verbessert wird.

2. Die Komponente kann nicht auf das Objekt this zugreifen

Da es keinen Instanziierungsprozess gibt, können zustandslose Komponenten nicht auf die Objekte in der Komponente zugreifen, z. B. this. ref, dieser .state usw. kann nicht aufgerufen werden. Wenn Sie darauf zugreifen möchten, können Sie dieses Formular nicht zum Erstellen von Komponenten verwenden

3. Komponenten können nicht auf Lebenszyklusmethoden zugreifen

Da zustandslose Komponenten kein Komponentenlebenszyklusmanagement erfordern und Zustandsverwaltung, sodass die zugrunde liegende Implementierung dieser Komponentenform nicht die Lebenszyklusmethode der Komponente implementiert. Daher können zustandslose Komponenten nicht am verschiedenen Lebenszyklusmanagement von Komponenten teilnehmen.

4. Zustandslose Komponenten können nur auf Eingabe-Requisiten zugreifen. Die gleichen Requisiten erzielen die gleichen Rendering-Ergebnisse, ohne dass es Nebenwirkungen gibt.

Zustandslose Komponenten werden empfohlen. Versuchen Sie es in großen Projekten Um die ursprünglich riesigen Komponenten mithilfe einfacher Schreibmethoden aufzuteilen, wird React in Zukunft auch eine Reihe von Optimierungen für zustandslose Komponenten durchführen, z Versuchen Sie, zustandslose Komponenten zu verwenden .

React.createClass

„React.createClass“ ist die erste empfohlene Methode zum Erstellen von Komponenten in React. Dies ist eine React-Komponente, die in der nativen JavaScript-Form von ES5 implementiert ist lautet wie folgt:

var InputControlES5 = React.createClass({
 propTypes: {//定义传入props中的属性各种类型
 initialValue: React.PropTypes.string
 },
 defaultProps: { //组件默认的props对象
 initialValue: ''
 },
 // 设置 initial state
 getInitialState: function() {//组件相关的状态对象
 return {
 text: this.props.initialValue || 'placeholder'
 };
 },
 handleChange: function(event) {
 this.setState({ //this represents react component instance
 text: event.target.value
 });
 },
 render: function() {
 return (
 <p>
 Type something:
 <input onChange={this.handleChange} value={this.state.text} />
 </p>
 );
 }
});
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

Im Vergleich zu zustandslosen Komponenten erstellen React.createClass und React.Component, die später beschrieben werden, beide zustandsbehaftete Komponenten Zugriff auf die Lebenszyklusmethoden der Komponente. Mit der Entwicklung von React wurden jedoch Probleme mit dem React.createClass-Formular selbst aufgedeckt:

React.createClass bindet Funktionsmethoden selbst (im Gegensatz zu React.Component, das nur die bindet Dinge, um die Sie sich kümmern müssen) Funktion) führt zu unnötigem Leistungsaufwand und erhöht die Wahrscheinlichkeit, dass Code veraltet.
Die Mixins von React.createClass sind nicht natürlich und intuitiv genug. Die React.Component-Form eignet sich sehr gut für Komponenten höherer Ordnung (Higher Order Components – HOC), die die Mixins anzeigt in einer intuitiveren Form. Leistungsstärkere Funktionen und HOC ist reines JavaScript. Sie müssen sich keine Sorgen machen, dass sie aufgegeben werden.

React.Component

React.Component wird zum Erstellen von Reaktionskomponenten in Form von ES6 verwendet. Es wird derzeit dringend für React to empfohlen Der Zustandskomponentenansatz wird letztendlich das React.createClass-Formular ersetzen. Im Vergleich zu React.createClass kann die Wiederverwendung von Code besser erreicht werden. Ändern Sie die obige Form von React.createClass wie folgt in die Form von React.Component:

class InputControlES6 extends React.Component {
 constructor(props) {
 super(props);
 // 设置 initial state
 this.state = {
 text: props.initialValue || 'placeholder'
 };
 // ES6 类中函数必须手动绑定
 this.handleChange = this.handleChange.bind(this);
 }
 handleChange(event) {
 this.setState({
 text: event.target.value
 });
 }
 render() {
 return (
 <p>
 Type something:
 <input onChange={this.handleChange}
 value={this.state.text} />
 </p>
 );
 }
}
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

Der Unterschied zwischen React.createClass und React.Component

Zusätzlich zu den unterschiedlichen grammatikalischen Formaten zur Definition von Komponenten im oben gezeigten Code gibt es viele wichtige Unterschiede zwischen den beiden. Die Hauptunterschiede zwischen den beiden werden im Folgenden beschrieben.

Die Funktion this ist selbstbindendBei Komponenten, die von React.createClass erstellt wurden, wird das this jeder Mitgliedsfunktion automatisch von React gebunden . Wenn Sie es verwenden, verwenden Sie einfach this.method direkt, und dies wird in der Funktion korrekt festgelegt.

const Contacts = React.createClass({ 
 handleClick() {
 console.log(this); // React Component instance
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

class Contacts extends React.Component { 
 constructor(props) {
 super(props);
 }
 handleClick() {
 console.log(this); // null
 }
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }

当然，React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。拿上例的handleClick函数来说，其绑定可以有：

 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this); //构造函数中绑定
 }

<p onClick={this.handleClick.bind(this)}></p> //使用bind来绑定
   <p onClick={()=>this.handleClick()}></p> //使用arrow function来绑定

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的

const TodoItem = React.createClass({
 propTypes: { // as an object
 name: React.PropTypes.string
 },
 getDefaultProps(){ // return a object
 return {
 name: '' 
 }
 }
 render(){
 return <p></p>
 }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

class TodoItem extends React.Component {
 static propTypes = {//类的静态属性
 name: React.PropTypes.string
 };
 static defaultProps = {//类的静态属性
 name: ''
 };
 ...
}

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态；

React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

const TodoItem = React.createClass({
 // return an object
 getInitialState(){ 
 return {
 isEditing: false
 }
 }
 render(){
 return <p></p>
 }
})

class TodoItem extends React.Component{
 constructor(props){
 super(props);
 this.state = { // define this.state in constructor
 isEditing: false
 } 
 }
 render(){
 return <p></p>
 }
}

Mixins的支持不同

Mixins(混入)是面向对象编程OOP的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过Mixins进该对象来达到代码复用。

React.createClass在创建组件时可以使用mixins属性，以数组的形式来混合类的集合。

var SomeMixin = { 
 doSomething() {
 }
};
const Contacts = React.createClass({ 
 mixins: [SomeMixin],
 handleClick() {
 this.doSomething(); // use mixin
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

但是遗憾的是React.Component这种形式并不支持Mixins，至今React团队还没有给出一个该形式下的官方解决方案；但是React开发者社区提供一个全新的方式来取代Mixins,那就是Higher-Order Components。

如何选择哪种方式创建组件

由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以：

能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

除此之外，创建组件的形式选择还应该根据下面来决定：

1、只要有可能，尽量使用无状态组件创建形式。

2、否则（如需要state、生命周期方法、ref等），使用`React.Component`这种es6形式创建组件

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Node.js中如何合并两个复杂对象的介绍

关于react-native之ART绘图的方法

Das obige ist der detaillierte Inhalt vonÜber drei Möglichkeiten zum Erstellen von Komponenten in React und ihre Unterschiede. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!