Welche verschiedenen Möglichkeiten gibt es, Reaktionskomponenten zu deklarieren?

So deklarieren Sie Reaktionskomponenten: 1. Zustandslose Komponenten, die im funktionalen Stil definiert sind. 2. Komponenten, die im es5-nativen Stil definiert sind. 3. Komponenten, die im es6-Format definiert sind.

So deklarieren Sie React-Komponenten:

1. Zustandslose Funktionskomponenten werden ab React-Version 0.14 erstellt. 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 zu anderen Komponenten konstruiert werden können

Diese Art durch mehrere einfache Designmuster, die dann kombiniert werden in einer großen Anwendung werden 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 Komponente wird nicht instanziiert und die Gesamtrenderleistung wird verbessert

• Weil die Komponente in eine Funktion der Rendermethode vereinfacht wird, weil es sich um zustandslose Komponenten handelt Zustandslose Komponenten befinden sich nicht im Prozess der Komponenteninstanziierung, und der Nicht-Instanziierungsprozess muss keinen überschüssigen Speicher zuweisen, wodurch die Leistung bis zu einem gewissen Grad verbessert wird.
  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 Statusverwaltung 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, ohne dass Nebenwirkungen auftreten.
• Zustandslose Komponenten werden in großen Projekten dazu ermutigt, die ursprünglich riesigen Komponenten zu unterteilen Führen Sie in Zukunft eine Reihe von Optimierungen für zustandslose Komponenten durch, z. B. bedeutungslose Prüfungen und Speicherzuweisungen. Versuchen Sie daher, wann immer möglich, zustandslose Komponenten zu verwenden.

2. React.createClass

<strong>2、React.createClass</strong>

React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件，其形式如下：

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;
};

与无状态组件相比，React.createClass和后面要描述的React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。但是随着React的发展，React.createClass形式自身的问题暴露出来：

React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。

React.createClass的mixins不够自然、直观；React.Component形式非常适合高阶组件（Higher Order Components--HOC）,它以更直观的形式展示了比mixins更强大的功能，并且HOC是纯净的JavaScript，不用担心他们会被废弃。HOC可以参考《无状态组件(Stateless Component) 与高阶组件》。

<strong>3、React.Component</strong>React.createClass ist die erste empfohlene Methode, um Komponenten in React zu erstellen. Ihre Form ist wie folgt ：

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;
};

Im Vergleich zu zustandslosen Komponenten erstellen React.createClass und React.Component beide zustandsbehaftete Komponenten, die instanziiert werden müssen und auf die Lebenszyklusmethoden zugreifen können. Mit der Entwicklung von React werden jedoch 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ötigem Ergebnis führt Leistungsaufwand und erhöhte Wahrscheinlichkeit, dass Code veraltet ist.

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 a aufweist intuitivere Formularfunktionen haben und HOC reines JavaScript ist, besteht kein Grund zur Sorge, dass sie veraltet sein könnten. Informationen zu HOC finden Sie unter „Zustandslose Komponenten und Komponenten höherer Ordnung“.

3. React.Component🎜🎜🎜React.Component erstellt Reaktionskomponenten in Form von ES6 und wird React letztendlich ersetzen. createClass-Formular; im Vergleich zu React.createClass kann eine bessere Code-Wiederverwendung erreicht werden. Ändern Sie die Form von React.createClass oben in die Form von React.Component wie folgt: 🎜rrreee🎜🎜Verwandte Lernempfehlungen: 🎜Javascript-Video-Tutorial🎜🎜🎜

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