В чем отличие между React.createClass и class extends React.component?
1,00
р.
р.
Недавно начал учить 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 (
Submit
) } } ReactDOM.render(
, document.getElementById('root') ) В видео-уроках по которым учился я было немного не так, а именно: В чем отличие от создание компонента путем наследования class Form extends React.Component от обычного React.createClass()? Зачем в конструкторе класса привязывается this с помощью bind, если оно и без этого работает? В чем вообще преимущество кода из документации перед моим кодом? (ниже) 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 (
Ответ Это два способа сделать одно и то же. В самом фейсбуке считают 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 итак уже обычно есть, миксины используют довольно редко.