React
React.createClass vs utökar React.Component
Sök…
Syntax
- Fall 1: React.createClass ({})
- Fall 2: klass MyComponent utökar React.Component {}
Anmärkningar
React.createClass avskrivades i v15.5 och förväntades tas bort i v16 . Det finns ett drop-in ersättningspaket för dem som fortfarande behöver det. Exempel på det bör uppdateras.
Skapa React-komponent
Låt oss utforska syntaxskillnaderna genom att jämföra två kodexempel.
React.createClass (utgått)
Här har vi en const med en React-klass tilldelad, med render följer för att slutföra en typisk baskomponentdefinition.
import React from 'react';
const MyComponent = React.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Låt oss ta ovanstående React.createClass-definition och konvertera den till en ES6-klass.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
I det här exemplet använder vi nu ES6-klasser. För React-ändringarna skapar vi nu en klass som heter MyComponent och sträcker sig från React.Component istället för att komma direkt till React.createClass. På det här sättet använder vi mindre React pannplatta och mer JavaScript.
PS: Vanligtvis skulle detta användas med något som Babel för att kompilera ES6 till ES5 för att fungera i andra webbläsare.
Förklara standardförsök och proptyper
Det finns viktiga förändringar i hur vi använder och deklarerar standardrekvisita och deras typer.
React.createClass
I den här versionen är egenskapen propTypes ett objekt där vi kan ange typen för varje rekvisita. getDefaultProps är en funktion som returnerar ett objekt för att skapa de initiala rekvisita.
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
Den här versionen använder propTypes som en egenskap i själva MyComponent- klassen istället för en egenskap som en del av createClass definitionsobjektet.
getDefaultProps har nu ändrats till bara en Objektegenskap i klassen som kallas defaultProps, eftersom det inte längre är en "get" -funktion, det är bara ett Objekt. Det undviker mer React pannplatta, detta är bara 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;
Dessutom finns det en annan syntax för propTypes och defaultProps . Det här är en genväg om din build har ES7-egendominitierare aktiverade:
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;
Ställ in startstatus
Det finns förändringar i hur vi ställer in de initiala tillstånden.
React.createClass
Vi har en getInitialState funktion, som helt enkelt returnerar ett objekt med initialtillstånd.
import React from 'react';
const MyComponent = React.createClass({
getInitialState () {
return {
activePage: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
I denna version förklarar vi alla tillstånd som en enkel initialiseringsegenskap i konstruktören , istället för att använda getInitialState funktionen. Det känns mindre "React API" driven eftersom detta bara är 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
Vi kan bara använda mixins på React.createClass-sättet.
React.createClass
I den här versionen kan vi lägga till mixins till komponenter med hjälp av mixins-egenskapen som tar en matris med tillgängliga mixins. Dessa utökar sedan komponentklassen.
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 stöds inte när du använder React-komponenter skrivna i ES6. Dessutom kommer de inte att ha stöd för ES6-klasser i React. Anledningen är att de betraktas som skadliga .
"detta" sammanhang
Att använda React.createClass binder automatiskt this sammanhang (värden) korrekt, men det är inte fallet när du använder ES6-klasser.
React.createClass
Notera onClick deklarationen med den här this.handleClick metoden bunden. När den här metoden kallas React kommer att tillämpa rätt exekveringskontekst på 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
Med ES6-klasser är this standard null , egenskaperna för klassen binder inte automatiskt till reaktionsklassen (komponent) -instansen.
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;
Det finns några sätt vi kan binda rätt det this sammanhanget.
Fall 1: Bind 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;
Fall 2: Bind i klasskonstruktören
Ett annat tillvägagångssätt är att ändra sammanhanget för detta. this.handleClick inuti constructor . På detta sätt undviker vi inre upprepningar. Betraktas av många som ett bättre tillvägagångssätt som alls undviker att röra 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;
Fall 3: Använd anonym funktion ES6
Du kan också använda ES6 anonym funktion utan att behöva binda uttryckligen:
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 / React “detta” nyckelord med ajax för att hämta data från servern
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>
);
}
}