React
React.createClass vs breidt React.Component uit
Zoeken…
Syntaxis
- Geval 1: React.createClass ({})
- Geval 2: klasse MyComponent breidt React.Component uit {}
Opmerkingen
React.createClass is verouderd in v15.5 en zal naar verwachting worden verwijderd in v16 . Er is een drop-in vervangingspakket voor degenen die het nog steeds nodig hebben. Voorbeelden hiervan moeten worden bijgewerkt.
Maak een reactiecomponent
Laten we de syntaxverschillen onderzoeken door twee codevoorbeelden te vergelijken.
React.createClass (verouderd)
Hier hebben we een const waaraan een React-klasse is toegewezen, waarbij de render volgt om een typische basiscomponentdefinitie te voltooien.
import React from 'react';
const MyComponent = React.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Laten we de bovenstaande React.createClass-definitie nemen en deze omzetten in een ES6-klasse.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
In dit voorbeeld gebruiken we nu ES6-klassen. Voor de React-wijzigingen maken we nu een klasse met de naam MyComponent en breiden we deze uit vanuit React.Component in plaats van rechtstreeks naar React.createClass te gaan. Op deze manier gebruiken we minder React boilerplate en meer JavaScript.
PS: Meestal zou dit worden gebruikt met zoiets als Babel om de ES6 naar ES5 te compileren om in andere browsers te werken.
Declareer standaard rekwisieten en proptypen
Er zijn belangrijke wijzigingen in het gebruik en declareren van standaardprops en hun typen.
React.createClass
In deze versie is de eigenschap propTypes een object waarin we het type voor elke prop kunnen aangeven. De eigenschap getDefaultProps is een functie die een object retourneert om de eerste rekwisieten te maken.
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
Deze versie gebruikt propTypes als een eigenschap van de werkelijke klasse MyComponent in plaats van een eigenschap als onderdeel van het createClass definitieobject.
De getDefaultProps is nu gewijzigd in alleen een objecteigenschap in de klasse met de naam defaultProps, omdat het niet langer een "get" -functie is, het is gewoon een object. Het vermijdt meer Reageren boilerplate, dit is gewoon 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;
Bovendien is er nog een syntaxis voor propTypes en defaultProps . Dit is een snelkoppeling als uw build ES7-eigenschapinitializers heeft ingeschakeld:
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;
Stel de initiële status in
Er zijn wijzigingen in de manier waarop we de begintoestanden instellen.
React.createClass
We hebben een getInitialState functie, die eenvoudigweg een object met initiële statussen retourneert.
import React from 'react';
const MyComponent = React.createClass({
getInitialState () {
return {
activePage: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
In deze versie verklaren we alle status als een eenvoudige initialisatie-eigenschap in de constructor , in plaats van de functie getInitialState te gebruiken. Het voelt minder "React API" aan, omdat dit gewoon JavaScript is.
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
We kunnen mixins alleen gebruiken op de React.createClass-manier.
React.createClass
In deze versie kunnen we mixins toevoegen aan componenten met behulp van de eigenschap mixins die een array van beschikbare mixins gebruikt. Deze breiden vervolgens de componentklasse uit.
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 worden niet ondersteund bij gebruik van React-componenten geschreven in ES6. Bovendien hebben ze geen ondersteuning voor ES6-klassen in React. De reden is dat ze als schadelijk worden beschouwd .
"deze" context
Het gebruik van React.createClass zal this context (waarden) automatisch correct binden, maar dat is niet het geval bij het gebruik van ES6-klassen.
React.createClass
Let op de aangifte onClick met de methode this.handleClick gebonden. Wanneer deze methode wordt genoemd, past React de juiste uitvoeringscontext toe op de 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
Bij ES6-klassen is this standaard null , eigenschappen van de klasse binden niet automatisch aan de instantie React class (component).
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;
Er zijn een paar manieren waarop we this context kunnen binden.
Geval 1: binden inline:
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;
Geval 2: binden in de klassenbouwer
Een andere benadering is het wijzigen van de context van this.handleClick in de constructor . Op deze manier voorkomen we inline herhaling. Door velen beschouwd als een betere aanpak die het aanraken van JSX helemaal vermijdt:
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;
Geval 3: gebruik de anonieme functie ES6
U kunt ook de anonieme functie van ES6 gebruiken zonder expliciet te 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}></div>
);
}
}
export default MyComponent;
ES6 / Reageer "dit" trefwoord met ajax om gegevens van de server te krijgen
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>
);
}
}