React.createClass или React.Component, какой подход выбрать?

Посмотрел две книги по реакту: "React Up & Running" Стояна Стефанова и "Pro React" Cassio de Sousa Antonio.

У Стояна в основном используется React.createClass, а у Cassio class ContactsApp extends Component.

Почему существует несколько подходов и какой выбрать?

Если коротко, то: React.createClass это изначальное нативное API реакта, а React.Component это синтаксис ES6. В будущем Facebook планирует отказаться от createClass в пользу классов ES6.

Мне сразу попалась хорошая статья, которая разъясняет оба подхода: "React.createClass versus extends React.Component". Перевод с небольшими дополнениями ниже:

Props

React.createClass
propTypes хранятся как объект, в котором перечислены типы каждого из свойств.

           propTypes: {
            headers: React.PropTypes.arrayOf(
              React.PropTypes.string
            ),
            initialData: React.PropTypes.arrayOf(
              React.PropTypes.arrayOf(
                React.PropTypes.string
              )
            ),
          },

getDefaultProps — функция, которая возвращает объект с начальными props

          getDefaultProps() {
            return {
              
            };
          },

Хотя я использовал getInitialState, и такой прием у меня тоже сработал (такой подход используется в книге Стояна Стефанова):

            getInitialState: function() {
              return {
                text: this.props.defaultValue,
                last: "" //this.props.defaultValue.substr(-1)
              };
            },

React.Component
propTypes -- идет как свойство класса (SearchBar.propTypes), а не как часть объекта класса. (такой подход выглядит более понятным, т.к. используется только обычный javascript синтаксис, без привлечения React API):

        SearchBar.propTypes = {
          onUserInput: PropTypes.func.isRequired,
          filterText: PropTypes.string.isRequired
        }

Начальные props объявляются как свойство обекта "defaultProps" (без get)

        SearchBar.defaultProps = {
          //some pre
        };

Второй подход выглядит более удобным, т.к. используется классические приемы javascript.

States

React.createClass
getInitialState -- функция, возвращает объект с начальными стейтами

         getInitialState: function() {
          return {
            text: this.props.defaultValue,
            last: "" //this.props.defaultValue.substr(-1)
          };
        },

React.Component
Начальные стейты объявляются в конструкторе (что снова ближе к каноническому javascript)

      constructor(){
        super();
        this.state={
          filterText: ''
        };
      }

Конструктор
Super() в конструкторе вызывается для того, чтобы передать props в создаваемый компонент реакта.

Различия 'this'

React.createClass
Автоматически привязываются значения из this (но если использовать ES6 могут измениться). при вызове handleClick, this класса передается в функцию:

        const Contacts = React.createClass({
          handleClick() {
            console.log(this); // React Component instance
          },
          render() {
            return (
              
); } });

React.Component
В ES6 свойства класса не связываются автоматически. Основной способ, просто передать this через bind(this):

Есть несколько способов привязки this.

class Contacts extends React.Component {
            constructor(props) {
              super(props);
            }
            handleClick() {
              console.log(this); // React Component instance
            }
            render() {
              return (
                
); } }

Еще один способ изменить контекст this.handleClick -- поместить его в конструктор. Такой способ хорош тем, что мы не трогаем код в JSX:

          class Contacts extends React.Component {
            constructor(props) {
              super(props);
              this.handleClick = this.handleClick.bind(this);
            }
            handleClick() {
              console.log(this); // React Component instance
            }
            render() {
              return (
                
); } }

(Наглядное объяснение как работает bind от Дена Абрамова)

Миксины

Миксины не поддерживаются при написание компонентов на ES6

React.createClass
Миксины привязываются к классу свойство объекта класса со специальным именем 'mixins'. В этом свойстве хранится массив нужных миксинов:

          var SomeMixin = {
            doSomething() {

            }
          };
          const Contacts = React.createClass({
            mixins: [SomeMixin],
            handleClick() {
              this.doSomething(); // use mixin
            },
            render() {
              return (
                
); } });

Повторюсь: в будущем Facebook планирует отказаться от createClass в пользу классов ES6. Это обосновано, т.к. второй подход будет использовать классический javascript синтаксис и поддерживать новый стандарт ES6.







 1491
comments powered by HyperComments