React
React.createClass vs extensions React.Component
Recherche…
Syntaxe
- Cas 1: React.createClass ({})
- Cas 2: la classe MyComponent étend React.Component {}
Remarques
React.createClass est React.createClass obsolète dans la version 15.5 et devrait être supprimé dans la version 16 . Il existe un package de remplacement pour ceux qui en ont encore besoin. Les exemples qui l’utilisent doivent être mis à jour.
Créer un composant réactif
Explorons les différences de syntaxe en comparant deux exemples de code.
React.createClass (obsolète)
Nous avons ici un const avec une classe React affectée, avec la fonction de render suivant pour compléter une définition de composant de base typique.
import React from 'react';
const MyComponent = React.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Prenons la définition React.createClass ci-dessus et convertissons-la pour utiliser une classe ES6.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
Dans cet exemple, nous utilisons maintenant les classes ES6. Pour les modifications de React, nous créons maintenant une classe appelée MyComponent et nous étendons à partir de React.Component au lieu d’accéder directement à React.createClass. De cette façon, nous utilisons moins de Reactplate React et plus de JavaScript.
PS: Typiquement, cela serait utilisé avec quelque chose comme Babel pour compiler l'ES6 en ES5 pour fonctionner dans d'autres navigateurs.
Déclarer les accessoires par défaut et les propTypes
Il y a des changements importants dans la façon dont nous utilisons et déclarons les accessoires par défaut et leurs types.
React.createClass
Dans cette version, la propriété propTypes est un objet dans lequel nous pouvons déclarer le type de chaque accessoire. La propriété getDefaultProps est une fonction qui renvoie un objet pour créer les accessoires initiaux.
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
Cette version utilise propTypes tant que propriété sur la classe MyComponent réelle au lieu d'une propriété faisant partie de l' createClass définition createClass .
La getDefaultProps a été remplacée par une propriété Object sur la classe appelée defaultProps, car ce n’est plus une fonction "get", c’est juste un objet. Cela évite plus de réactions, c'est tout simplement 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;
En outre, il existe une autre syntaxe pour propTypes et defaultProps . Il s’agit d’un raccourci si les initialiseurs de propriété ES7 de votre version sont activés:
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;
Définir l'état initial
Il y a des changements dans la façon dont nous définissons les états initiaux.
React.createClass
Nous avons une fonction getInitialState , qui renvoie simplement un objet des états initiaux.
import React from 'react';
const MyComponent = React.createClass({
getInitialState () {
return {
activePage: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Dans cette version, nous déclarons tous les états comme une simple propriété d'initialisation dans le constructeur , au lieu d'utiliser la fonction getInitialState . Il se sent moins "réactif API" car il s'agit simplement de JavaScript.
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
Nous ne pouvons utiliser les mixins qu'avec la méthode React.createClass.
React.createClass
Dans cette version, nous pouvons ajouter des mixins aux composants en utilisant la propriété mixins qui prend un tableau de mixins disponibles. Ceux-ci étendent alors la classe de composant.
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
Les mix React ne sont pas pris en charge lors de l'utilisation de composants React écrits en ES6. De plus, ils ne prendront pas en charge les classes ES6 dans React. La raison en est qu'ils sont considérés comme dangereux .
"this" Contexte
L'utilisation de React.createClass lie automatiquement this contexte (valeurs) correctement, mais ce n'est pas le cas lors de l'utilisation de classes ES6.
React.createClass
Notez la déclaration onClick avec la méthode this.handleClick liée. Lorsque cette méthode est appelée, React appliquera le bon contexte d'exécution au 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
Avec les classes ES6, this est null par défaut, les propriétés de la classe ne sont pas automatiquement liées à l'instance de la classe React (composant).
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;
Il y a quelques façons dont nous pourrions lier le droit this contexte.
Cas 1: Lier en ligne:
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;
Cas 2: Liaison dans le constructeur de classe
Une autre approche consiste à changer le contexte de this.handleClick dans le constructor . De cette façon, nous évitons les répétitions en ligne. Considéré par beaucoup comme une meilleure approche qui évite de toucher à JSX:
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;
Cas 3: Utiliser la fonction anonyme ES6
Vous pouvez également utiliser la fonction anonyme ES6 sans avoir à vous lier explicitement:
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 / Réagir le mot-clé "this" avec ajax pour récupérer les données du serveur
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>
);
}
}
