Es gibt verschiedene Möglichkeiten, Reaktionskomponenten zu deklarieren

Es gibt drei Möglichkeiten, Reaktionskomponenten zu deklarieren: 1. Verwenden Sie den Funktionsstil, um zustandslose Komponenten zu definieren. 2. Verwenden Sie die Methode „React.createClass()“, um Komponenten zu definieren Verwenden Sie das ES6-Formular, um Komponenten zu definieren.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Die Art und Weise, wie React Komponenten deklariert (erstellt):

Nach der Einführung von React gab es drei Möglichkeiten, React-Komponenten aus unterschiedlichen Gründen zu definieren, alle mit demselben Ziel:

Die drei spezifischen Arten:

• Funktionale Definition zustandsloser Komponenten

• React.createClass() definiert Komponenten

• React.Component() definiert Komponenten

Obwohl es drei Möglichkeiten gibt, Reaktionskomponenten zu definieren, dann diese drei Definitionsmöglichkeiten Komponenten sind Was ist der Unterschied? 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 integriert werden können, beispielsweise durch mehrere einfache und anschließende Entwurfsmuster zum Zusammenführen eine große Anwendung wird befürwortet.

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 <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

Die Erstellungsform zustandsloser Komponenten macht den Code besser lesbar und reduziert eine Menge redundanten Codes, wodurch er auf nur eine Rendermethode vereinfacht wird, was den Komfort beim Schreiben einer Komponente erheblich erhöht Darüber hinaus weisen zustandslose Komponenten die folgenden bemerkenswerten Merkmale auf:

Die Erstellungsform zustandsloser Komponenten macht den Code besser lesbar und reduziert eine Menge redundanten Codes, wodurch er auf nur eine Rendermethode vereinfacht wird, was die Lesbarkeit des Codes erheblich verbessert Erhöht den Komfort beim Schreiben einer Komponente. Darüber hinaus weisen zustandslose Komponenten die folgenden wichtigen Funktionen auf:

• Die Komponente wird nicht instanziiert und die Gesamtrenderleistung wird verbessert

  da die Komponente in ein Rendering optimiert wird Aufgrund der Funktion der Methode befindet sich die zustandslose Komponente nicht im Prozess der Komponenteninstanziierung. Daher ist es nicht erforderlich, überschüssigen Speicher zuzuweisen, sodass die Leistung verbessert wird gewissermaßen.

• Komponenten können nicht auf dieses Objekt zugreifen

  Zustandslose Komponenten haben keinen Instanziierungsprozess, daher können sie nicht auf die Objekte in der Komponente this zugreifen. Beispielsweise kann nicht auf this.ref, this.state usw. zugegriffen werden. Wenn Sie darauf zugreifen möchten, können Sie dieses Formular nicht zum Erstellen von Komponenten verwenden

• Komponenten können nicht auf Lebenszyklusmethoden zugreifen

  Da zustandslose Komponenten kein Komponentenlebenszyklusmanagement und keine Zustandsverwaltung erfordern, ist dies bei der zugrunde liegenden Implementierung dieser Komponentenform der Fall Die Lebenszyklusmethoden der Komponente sind nicht implementiert. Daher können zustandslose Komponenten nicht am verschiedenen Lebenszyklusmanagement von Komponenten teilnehmen.

• Zustandslose Komponenten können nur auf die Eingabe-Requisiten zugreifen. Dieselben Requisiten erzielen die gleichen Rendering-Ergebnisse ohne Nebenwirkungen.

Zustandslose Komponenten werden in großen Projekten dazu ermutigt, das Original so einfach wie möglich aufzuteilen Komponenten wird React in Zukunft auch eine Reihe von Optimierungen für zustandslose Komponenten durchführen, z. B. bedeutungslose Prüfungen und Speicherzuweisung. Versuchen Sie daher, wann immer möglich, zustandslose Komponenten zu verwenden.

React.createClass

React.createClass ist die Methode zum Erstellen von Komponenten, die zu Beginn von React empfohlen wurde. Dies ist eine React-Komponente, die von ES5s nativem JavaScript implementiert wird. Ihre Form ist 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 (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
});
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

Verglichen mit stateless Komponenten, React.createClass und React.Component, die später beschrieben werden, erstellen beide zustandsbehaftete Komponenten. Diese Komponenten müssen instanziiert werden und haben Zugriff auf die Lebenszyklusmethoden der Komponente. Aber mit der Entwicklung von React werden die Probleme des React.createClass-Formulars selbst offengelegt:

• React.createClass bindet Funktionsmethoden selbst (im Gegensatz zu React.Component, das nur Funktionen bindet, die betroffen sein müssen), was zu … unnötiger Leistungsaufwand, der die Wahrscheinlichkeit erhöht, 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 leistungsfähigere Funktionen als Mixins in einer intuitiveren Form zeigt , und HOC ist reines JavaScript, Sie müssen sich keine Sorgen machen, dass sie veraltet sind. Informationen zu HOC finden Sie unter „Zustandslose Komponenten und Komponenten höherer Ordnung“.

React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为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 (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

推荐学习：《react视频教程》

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Möglichkeiten, Reaktionskomponenten zu deklarieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!