React
React.createClass vs extends React.Component
Поиск…
Синтаксис
- Случай 1: React.createClass ({})
- Случай 2: класс MyComponent расширяет React.Component {}
замечания
React.createClass устарел в версии 15.5 и, как ожидается, будет удален в v16 . Для тех, которые все еще требуют этого, есть пакет замены замены . Примеры, использующие его, должны быть обновлены.
Создать реактивный компонент
Давайте рассмотрим различия в синтаксисе, сравнив два примера кода.
React.createClass (устаревший)
Здесь у нас есть const с классом класса React, с последующей функцией render чтобы выполнить типичное определение базового компонента.
import React from 'react';
const MyComponent = React.createClass({
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
Давайте рассмотрим вышеописанное определение React.createClass и преобразуем его в класс ES6.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div></div>
);
}
}
export default MyComponent;
В этом примере мы теперь используем классы ES6. Для изменений React теперь мы создаем класс MyComponent и распространяем его из React.Component, а не напрямую на React.createClass. Таким образом, мы используем меньше шаблонов React и больше JavaScript.
PS: Обычно это будет использоваться с чем-то вроде Babel для компиляции ES6 на ES5 для работы в других браузерах.
Объявлять реквизиты и пропеллеры по умолчанию
Существуют важные изменения в том, как мы используем и объявляем реквизиты по умолчанию и их типы.
React.createClass
В этой версии свойство propTypes представляет собой объект, в котором мы можем объявить тип для каждой опоры. Свойство getDefaultProps - это функция, которая возвращает объект для создания исходных реквизитов.
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
Эта версия использует propTypes как свойство в самом классе MyComponent вместо свойства как части createClass определения createClass .
Теперь getDefaultProps изменился на просто свойство Object в классе, называемом defaultProps, поскольку он больше не является функцией «get», а просто Object. Это позволяет избежать повторного шаблона React, это простой 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;
Кроме того, существует еще один синтаксис для propTypes и defaultProps . Это ярлык, если в вашей сборке включены инициализаторы свойств 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;
Установить начальное состояние
Существуют изменения в том, как мы устанавливаем начальные состояния.
React.createClass
У нас есть функция getInitialState , которая просто возвращает объект начальных состояний.
import React from 'react';
const MyComponent = React.createClass({
getInitialState () {
return {
activePage: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
В этой версии мы объявляем все состояние как простое свойство инициализации в конструкторе , вместо использования функции getInitialState . Он чувствует себя менее «React API», потому что это простой 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 только с методом React.createClass.
React.createClass
В этой версии мы можем добавлять mixins к компонентам, используя свойство mixins, которое принимает массив доступных миксинов. Затем они расширяют класс компонента.
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, написанных на ES6. Более того, у них не будет поддержки классов ES6 в React. Причина в том, что они считаются вредными .
«этот» контекст
Использование React.createClass автоматически привяжет this контекст (значения) правильно, но это не относится к использованию классов ES6.
React.createClass
Обратите внимание на onClick декларацию с this.handleClick методом связанного. Когда этот метод будет вызван, React применит правильный контекст выполнения к 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
С классами ES6 this по умолчанию равно null , свойства этого класса автоматически не привязываются к экземпляру класса React (компонент).
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;
Есть несколько способов связать право this контекста.
Случай 1: Связать встроенный:
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;
Случай 2: привязка к конструктору класса
Другой подход заключается в изменении контекста this.handleClick внутри constructor . Таким образом мы избегаем повторного повторения. Многие считают, что это лучший подход, который позволяет вообще не прикасаться к 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;
Случай 3: использование анонимной функции ES6
Вы также можете использовать анонимную функцию ES6, не связывая явно:
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 / Реагировать «это» ключевое слово с помощью ajax для получения данных с сервера
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>
);
}
}