React
React.createClass vs estende React.Component
Ricerca…
Sintassi
- Caso 1: React.createClass ({})
- Caso 2: classe MyComponent estende React.Component {}
Osservazioni
React.createClass stato deprecato in v15.5 e dovrebbe essere rimosso in v16 . C'è un pacchetto di sostituzione drop-in per quelli che lo richiedono ancora. Gli esempi che lo utilizzano dovrebbero essere aggiornati.
Crea componente di reazione
Esploriamo le differenze di sintassi confrontando due esempi di codice.
React.createClass (deprecato)
Qui abbiamo un const con una classe React assegnata, con la funzione render successiva per completare una tipica definizione di componente base.
import React from 'react';
const MyComponent = React.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Prendiamo la precedente definizione React.createClass e convertiamola per utilizzare una classe ES6.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
In questo esempio stiamo ora utilizzando le classi ES6. Per le modifiche di React, ora creiamo una classe chiamata MyComponent ed estendiamo da React.Component anziché accedere direttamente a React.createClass. In questo modo, utilizziamo meno il boiler React e più JavaScript.
PS: Tipicamente questo sarebbe usato con qualcosa come Babel per compilare ES6 in ES5 per funzionare in altri browser.
Dichiarare puntelli predefiniti e PropTypes
Ci sono cambiamenti importanti nel modo in cui usiamo e dichiariamo oggetti di scena di default e i loro tipi.
React.createClass
In questa versione, la proprietà propTypes è un oggetto in cui è possibile dichiarare il tipo per ciascun oggetto. La proprietà getDefaultProps è una funzione che restituisce un oggetto per creare gli oggetti di scena iniziali.
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
Questa versione utilizza propTypes come proprietà sull'effettiva classe MyComponent anziché su una proprietà come parte createClass definizione createClass .
Il getDefaultProps ora è stato modificato in una proprietà Object nella classe denominata defaultProps, in quanto non è più una funzione "get", è solo un oggetto. Evita più React boilerplate, questo è semplicemente 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;
Inoltre, esiste un'altra sintassi per propTypes e defaultProps . Questa è una scorciatoia se la tua build ha attivato gli inizializzatori delle proprietà di ES7:
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;
Imposta stato iniziale
Ci sono dei cambiamenti nel modo in cui impostiamo gli stati iniziali.
React.createClass
Abbiamo una funzione getInitialState , che restituisce semplicemente un oggetto di stati iniziali.
import React from 'react';
const MyComponent = React.createClass({
getInitialState () {
return {
activePage: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
In questa versione dichiariamo tutto lo stato come una semplice proprietà di inizializzazione nel costruttore , invece di usare la funzione getInitialState . Sembra meno "React API" guidato poiché questo è semplicemente 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
Possiamo usare mixins solo con il modo in cui React.createClass.
React.createClass
In questa versione possiamo aggiungere mixins ai componenti usando la proprietà mixins che prende una matrice di mixin disponibili. Questi estendono quindi la classe del componente.
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
I mixaggi di reazione non sono supportati quando si usano componenti React scritti in ES6. Inoltre, non avranno supporto per le classi ES6 in React. Il motivo è che sono considerati dannosi .
"questo" Contesto
L'utilizzo di React.createClass associa automaticamente this contesto (valori) correttamente, ma non è il caso quando si utilizzano le classi ES6.
React.createClass
Nota la dichiarazione onClick con il metodo this.handleClick associato. Quando viene chiamato questo metodo, React applicherà il contesto di esecuzione corretto a 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
Con le classi ES6 this è null per impostazione predefinita, le proprietà della classe non si associano automaticamente all'istanza della classe React (componente).
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;
Ci sono alcuni modi in cui possiamo legare il diritto a this contesto.
Caso 1: legatura in linea:
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;
Caso 2: rilegatura nel costruttore della classe
Un altro approccio sta cambiando il contesto di this.handleClick all'interno del constructor . In questo modo evitiamo la ripetizione in linea. Considerato da molti come un approccio migliore che evita di toccare JSX affatto:
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;
Caso 3: utilizzare la funzione anonima ES6
Puoi anche utilizzare la funzione anonima ES6 senza doverli associare esplicitamente:
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 / Reagire con "questa" parola chiave con ajax per ottenere dati dal server
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>
);
}
}