React
React.createClass vs erweitert React.Component
Suche…
Syntax
- Fall 1: React.createClass ({})
- Fall 2: Klasse MyComponent erweitert React.Component {}
Bemerkungen
React.createClass wurde in Version 15.5 nicht mehr unterstützt und wird voraussichtlich in Version 16 entfernt . Für diejenigen, die es noch benötigen, gibt es ein Drop-In-Ersatzpaket . Beispiele, die es verwenden, sollten aktualisiert werden.
Reakt-Komponente erstellen
Untersuchen wir die Syntaxunterschiede durch Vergleich zweier Codebeispiele.
React.createClass (veraltet)
Hier haben wir ein const mit einer zugewiesenen React-Klasse, mit der render Funktion eine typische Definition der Basiskomponente abschließen.
import React from 'react';
const MyComponent = React.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Nehmen wir die obige Definition von React.createClass und konvertieren sie in eine ES6-Klasse.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
In diesem Beispiel verwenden wir jetzt ES6-Klassen. Für die React-Änderungen erstellen wir jetzt eine Klasse mit dem Namen MyComponent und erweitern sie von React.Component, anstatt direkt auf React.createClass zuzugreifen. Auf diese Weise verwenden wir weniger React Boilerplate und mehr JavaScript.
PS: Normalerweise wird dies mit etwas wie Babel verwendet, um die ES6 auf ES5 zu kompilieren, damit sie in anderen Browsern funktioniert.
Deklarieren Sie Standard-Requisiten und PropTypes
Es gibt wichtige Änderungen bei der Verwendung und Deklaration von Standard-Requisiten und deren Typen.
React.createClass
In dieser Version ist die Eigenschaft propTypes ein Objekt, in dem wir den Typ für jede Eigenschaft propTypes können. Die getDefaultProps Eigenschaft ist eine Funktion, die ein Objekt zurückgibt, um die ursprünglichen Requisiten zu erstellen.
import React from 'react';
const MyComponent = React.createClass({
propTypes: {
name: React.PropTypes.string,
position: React.PropTypes.number
},
getDefaultProps() {
return {
name: 'Home',
position: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Diese Version verwendet propTypes als Eigenschaft der tatsächlichen MyComponent- Klasse anstelle einer Eigenschaft als Teil des createClass Definitionsobjekts.
Das getDefaultProps hat sich jetzt zu einer Object-Eigenschaft in der Klasse namens defaultProps geändert, da es nicht länger eine "get" -Funktion ist, sondern nur ein Object. Es vermeidet mehr React Boilerplate, dies ist nur reines JavaScript.
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
MyComponent.propTypes = {
name: React.PropTypes.string,
position: React.PropTypes.number
};
MyComponent.defaultProps = {
name: 'Home',
position: 1
};
export default MyComponent;
Darüber hinaus gibt es eine andere Syntax für propTypes und defaultProps . Dies ist eine Verknüpfung, wenn in Ihrem Build die ES7-Eigenschaftsinitialisierer aktiviert sind:
import React from 'react';
class MyComponent extends React.Component {
static propTypes = {
name: React.PropTypes.string,
position: React.PropTypes.number
};
static defaultProps = {
name: 'Home',
position: 1
};
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default MyComponent;
Anfangszustand einstellen
Es gibt Änderungen in der Einstellung der Anfangszustände.
React.createClass
Wir haben eine getInitialState Funktion, die einfach ein Objekt mit Anfangszuständen zurückgibt.
import React from 'react';
const MyComponent = React.createClass({
getInitialState () {
return {
activePage: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
In dieser Version deklarieren wir all state als einfache Initialisierungseigenschaft im Konstruktor , anstatt die Funktion getInitialState verwenden. Es fühlt sich weniger nach "React API" an, da dies lediglich JavaScript ist.
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activePage: 1
};
}
render() {
return (
<div></div>
);
}
}
export default MyComponent;
Mixins
Wir können mixins nur mit der Methode React.createClass verwenden.
React.createClass
In dieser Version können Sie mixins zu Komponenten hinzufügen, indem Sie die mixins -Eigenschaft verwenden, die ein Array verfügbarer Mixins benötigt. Diese erweitern dann die Komponentenklasse.
import React from 'react';
var MyMixin = {
doSomething() {
}
};
const MyComponent = React.createClass({
mixins: [MyMixin],
handleClick() {
this.doSomething(); // invoke mixin's method
},
render() {
return (
<button onClick={this.handleClick}>Do Something</button>
);
}
});
export default MyComponent;
React.Component
React Mixins werden nicht unterstützt, wenn in ES6 geschriebene React-Komponenten verwendet werden. Außerdem werden sie in React keine ES6-Klassen unterstützen. Der Grund ist, dass sie als schädlich betrachtet werden .
"dieser" Kontext
Die Verwendung von React.createClass bindet this Kontext (Werte) automatisch korrekt. this ist jedoch bei Verwendung von ES6-Klassen nicht der Fall.
React.createClass
Beachten Sie die onClick Deklaration mit der this.handleClick Methode. Wenn diese Methode aufgerufen wird, wendet React den richtigen Ausführungskontext auf den handleClick .
import React from 'react';
const MyComponent = React.createClass({
handleClick() {
console.log(this); // the React Component instance
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
export default MyComponent;
React.Component
Bei ES6-Klassen ist this standardmäßig null . Die Eigenschaften der Klasse werden nicht automatisch an die React-Klasseninstanz (Komponente) gebunden.
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this); // null
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
export default MyComponent;
Es gibt einige Möglichkeiten, wie wir this Kontext richtig binden können.
Fall 1: Inline binden:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<div onClick={this.handleClick.bind(this)}></div>
);
}
}
export default MyComponent;
Fall 2: Binden Sie im Klassenkonstruktor
Ein anderer Ansatz besteht darin, den Kontext von this.handleClick im constructor this.handleClick . Auf diese Weise vermeiden wir Inline-Wiederholungen. Von vielen als ein besserer Ansatz betrachtet, der JSX überhaupt nicht berührt:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
export default MyComponent;
Fall 3: Verwenden Sie die anonyme Funktion von ES6
Sie können auch eine anonyme ES6-Funktion verwenden, ohne explizit binden zu müssen:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log(this); // the React Component instance
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
export default MyComponent;
ES6 / Reagieren Sie dieses Schlüsselwort mit ajax, um Daten vom Server abzurufen
import React from 'react';
class SearchEs6 extends React.Component{
constructor(props) {
super(props);
this.state = {
searchResults: []
};
}
showResults(response){
this.setState({
searchResults: response.results
})
}
search(url){
$.ajax({
type: "GET",
dataType: 'jsonp',
url: url,
success: (data) => {
this.showResults(data);
},
error: (xhr, status, err) => {
console.error(url, status, err.toString());
}
});
}
render() {
return (
<div>
<SearchBox search={this.search.bind(this)} />
<Results searchResults={this.state.searchResults} />
</div>
);
}
}