В реакторе существуют ли какие-либо реальные различия между этими двумя реализациями? Некоторые друзья говорят мне, что FirstComponent - это образец, но я не понимаю, почему. SecondComponent кажется более простым, потому что рендер вызывается только один раз.
Во-первых:
import React, { PropTypes } from 'react'
class FirstComponent extends React.Component {
state = {
description: ''
}
componentDidMount() {
const { description} = this.props;
this.setState({ description });
}
render () {
const {state: { description }} = this;
return (
<input type="text" value={description} />
);
}
}
export default FirstComponent;
Во-вторых:
import React, { PropTypes } from 'react'
class SecondComponent extends React.Component {
state = {
description: ''
}
constructor (props) => {
const { description } = props;
this.state = {description};
}
render () {
const {state: { description }} = this;
return (
<input type="text" value={description} />
);
}
}
export default SecondComponent;
Обновление: Я изменил setState() на this.state = {} (спасибо joews). Тем не менее, я до сих пор не вижу разницы. Лучше другого?
Вам не нужно вызывать setState в компоненте constructor - он идиоматический, чтобы установить this.state напрямую:
class FirstComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
x: props.initialX
};
}
// ...
}
См. React docs - Добавление локального состояния в класс.
Нет никакого преимущества для первого описанного вами метода. Это приведет к второму обновлению сразу перед установкой компонента в первый раз.
Вы можете использовать короткую форму, как показано ниже, если хотите добавить все реквизиты для сохранения и сохранения тех же имен.
constructor(props) {
super(props);
this.state = {
...props
}
//...
}
Вы можете пропустить вызов конструктора, если все, что вы делаете, это установка переменных.
class FirstComponent extends React.Component {
state = {
x: this.props.initialX,
};
}
по крайней мере в потоке - я не уверен, что это стандартный синтаксис ES6.