React
React.createClass vs rozszerza React.Component
Szukaj…
Składnia
- Przypadek 1: React.createClass ({})
- Przypadek 2: klasa MyComponent rozszerza React.Component {}
Uwagi
React.createClass została React.createClass za przestarzałą w wersji 15.5 i prawdopodobnie zostanie usunięta w wersji 16 . Istnieje pakiet zastępczy dla tych, którzy nadal go potrzebują. Przykłady korzystające z niego powinny zostać zaktualizowane.
Utwórz React Component
Zbadajmy różnice w składni, porównując dwa przykłady kodu.
React.createClass (przestarzałe)
Tutaj mamy const z przypisaną klasą React, z funkcją render aby uzupełnić typową definicję komponentu podstawowego.
import React from 'react';
const MyComponent = React.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Weźmy powyższą definicję React.createClass i przekonwertujmy ją, aby używała klasy ES6.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
W tym przykładzie używamy teraz klas ES6. Dla zmian React tworzymy teraz klasę o nazwie MyComponent i rozszerzamy z React.Component zamiast bezpośrednio uzyskiwać dostęp do React.createClass. W ten sposób używamy mniej Reactplateplate i więcej JavaScript.
PS: Zazwyczaj byłoby to używane z czymś takim jak Babel do kompilacji ES6 do ES5 do pracy w innych przeglądarkach.
Deklaruj domyślne rekwizyty i typy propów
Istnieją ważne zmiany w sposobie używania i deklarowania domyślnych rekwizytów i ich typów.
React.createClass
W tej wersji właściwość propTypes jest obiektem, w którym możemy zadeklarować typ każdego rekwizytu. Właściwość getDefaultProps to funkcja, która zwraca obiekt w celu utworzenia początkowych rekwizytów.
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
Ta wersja używa propTypes jako właściwości rzeczywistej klasy MyComponent zamiast właściwości jako części obiektu definicji createClass .
Metoda getDefaultProps zmieniła się teraz na właściwość Object w klasie o nazwie defaultProps, ponieważ nie jest to już funkcja „get”, tylko obiekt. Unika więcej React Boiler, to jest po prostu 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;
Dodatkowo istnieje inna składnia dla propTypes i defaultProps . Jest to skrót, jeśli kompilacja ma włączone inicjalizatory właściwości 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;
Ustaw stan początkowy
Istnieją zmiany w sposobie ustawiania stanów początkowych.
React.createClass
Mamy funkcję getInitialState , która po prostu zwraca obiekt stanów początkowych.
import React from 'react';
const MyComponent = React.createClass({
getInitialState () {
return {
activePage: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
W tej wersji deklarujemy cały stan jako prostą właściwość inicjującą w konstruktorze , zamiast używania funkcji getInitialState . Wydaje się mniej sterowany „React API”, ponieważ jest to po prostu 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;
Mixiny
Możemy używać mixins tylko w sposób React.createClass.
React.createClass
W tej wersji możemy dodawać mixins do składników za pomocą właściwości mixins, która pobiera tablicę dostępnych miksów. Następnie rozszerzają klasę komponentów.
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
Miksy React nie są obsługiwane podczas korzystania ze składników React napisanych w ES6. Co więcej, nie będą mieli obsługi klas ES6 w React. Powodem jest to, że są uważane za szkodliwe .
„ten” kontekst
Użycie React.createClass automatycznie automatycznie powiąże this kontekst (wartości), ale nie jest tak w przypadku używania klas ES6.
React.createClass
Zanotuj deklarację onClick z this.handleClick metodą this.handleClick . Po wywołaniu tej metody React zastosuje odpowiedni kontekst wykonania do 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
Z klas ES6 this jest null domyślnie właściwości klasy nie wiążą się automatycznie do React klasy (Component) instancji.
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;
Istnieje kilka sposobów na powiązanie this kontekstu.
Przypadek 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;
Przypadek 2: Powiązanie w konstruktorze klasy
Innym podejściem jest zmiana kontekstu this.handleClick wewnątrz constructor . W ten sposób unikamy powtarzania w linii. Uważane przez wielu za lepsze podejście, które w ogóle pozwala uniknąć dotykania 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;
Przypadek 3: Użyj funkcji anonimowej ES6
Możesz także użyć funkcji anonimowej ES6 bez konieczności jawnego wiązania:
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 / Reaguj „to” słowo kluczowe za pomocą ajax, aby uzyskać dane z serwera
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>
);
}
}