Недавно начал учить React по видео-урокам. Пробовал писать всякие "штуки" на нем и как-то наткнулся на переведенную на русский официальную документацию вот с таким вот примером:
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Text field value is: ' + this.state.value);
}
render() {
return (
<div>
<input type="text"
placeholder="Hello!"
value={this.state.value}
onChange={this.handleChange} />
<button onClick={this.handleSubmit}>
Submit
</button>
</div>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById('root')
);
В видео-уроках по которым учился я было немного не так, а именно:
var Form = React.createClass({
getInitialState: function(){
return {
value: ""
}
},
handleChange(e){
this.setState({value: e.target.value});
},
handleSubmit(e){
alert("Text field value is: " + this.state.value);
},
render: function(){
return (
<div>
<input type="text"
placeholder="Hello!"
value={this.state.value}
onChange={this.handleChange} />
<button onClick={this.handleSubmit}>
Submit
</button>
</div>
);
}
});
ReactDOM.render(
<Form />,
document.getElementById('root')
);
Заранее спасибо:3
Это два способа сделать одно и то же.
В самом фейсбуке считают es6 классы более семантически верными и лелеют себя мыслью когда-нибудь в далеком-далеком счастливом будущем поддержку React.createClass прекратить (источник, первый абзац). Но будет это не в ближайший год и не в два, пока createClass
даже не deprecated.
Ответ на ваш третий вопрос: пока это два равнозначных способа.
Лучше привыкать писать es6-классы, но как там будет в будущем на самом деле предсказать сложно.
Главные отличия:
Классы - это es6 фича. Соответственно вся транспиляторская магия для полноценной работы с es6 у вас должна присутствовать.
В React.createClass
внутри работает тайная магия которая автоматически биндит все методы переданные в createClass
к this. В компонентах es6-классов от такой штуки решили отказаться, потому что она часто смущала разработчиков, и биндить надо ручками. Оттуда кстати вытекает ответ на ваш второй вопрос: без этого - не работает.
В компонентах-es6-классах нет миксинов. Совет мудрецов разрабатывающих реакт решил что миксины нехорошо, хорошо - композиция. И решил не давать возможность писать нехорошо в новых версиях.
Вместо getInitialState
используется constructor
так как решили что это идиоматичнее для es6 классов, также propTypes
- свойство самого класса, вместо метода getDefaultProps
есть свойство класса defaultProps
Возможно есть еще какие-то отличия о которых я не вспомню, лично у меня в рабочем проекте есть и createClass в старом коде и es6 классы в новом. getInitialState аутобиндинг и propTypes - это явные заметные отличия, es6 итак уже обычно есть, миксины используют довольно редко.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Здравствуйте! Через ajax пытаюсь отправить строку (файлы закодированные в base64) типа jsonПроблема в том, что если кодирую файлы общим объемом примерно...
ЗдравствуйтеИспользую плагин datables для верстки таблицы
В общем делаю как то так, думаю как сделать так чтобы можно было обратиться к существующему объекту
Есть меню-сендвич, который выезжал вниз на контент, чтобы этого не случилось при клике на меню добавил padding-top у этого самого контентаВстал...