В чем отличие между React.createClass и class extends React.component?

#javascript #reactjs

Недавно начал учить 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 (
                

                    
                    
                 
             );
    }
}

 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 (
                

                    
                    
                 
             );
    }
});

ReactDOM.render(
        ,
        document.getElementById('root')
);


Заранее спасибо:3
    

Ответы

Ответ 1

Это два способа сделать одно и то же.
В самом фейсбуке считают 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 итак уже обычно есть, миксины используют
довольно редко.


Ответ 2

Новые разработчики React часто путаются, когда сталкиваются с двумя разными стилями
для объявления компонентов React.
В настоящее время экосистема React разделена между декларацией компонента React.createClass:

const MyComponent = React.createClass({
  render() {
    return(
I am a component!
);
  }
});


И декларацией компонента класса ES6:

class MyComponent extends React.Component {
  render() {
    return(
I am a component, too!
);
  }
}


В чем разница между компонентами класса React.createClass и ES6? И почему они оба
существуют?

Как язык на прототипах, JavaScript не имел классов на протяжении большей части своего
существования. ES6, последняя версия JavaScript, завершенная в июне 2015 года, ввела
классы как синтаксический сахар.


  Синтаксис класса не представляет для JavaScript новую объектно-ориентированную
модель наследования. Классы JavaScript обеспечивают гораздо более простой и понятный
синтаксис для создания объектов и работы с наследованием.


Поскольку JavaScript не имел классов, React включал собственную систему классов.
React.createClass позволяет создавать компоненты классов. Под капотом ваш компонентный
класс использует систему классов на заказ, реализованную в React.

С помощью ES6 React позволяет реализовать классы компонентов, которые используют
классы JavaScript ES6. Конечный результат одинаков - у вас есть класс компонентов.
Но стиль отличается. И один использует пользовательскую систему классов JavaScript
(createClass), в то время как другой использует родную систему классов JavaScript.

С тех пор сообщество переключается на компоненты класса ES6. Это по уважительной
причине. Оно использовало createClass, потому что у JavaScript не было встроенной системы
классов. Но ES6 получила быстрое принятие. И с ES6, вместо того, чтобы изобретать колесо,
React может использовать простой класс ES6 JavaScript.

К разработчику различия между компонентами, созданными с ES6-классами и React createClass,
к счастью минимальны. Если вы научились писать компоненты React с помощью createClass,
и если вы когда-либо захотите использовать классы ES6, вы легко найдете переход.