React.createClass vs extends Component

Ответ 1

Эти два способа зависят от того, используется ли синтаксис ES6 или нет, и они также изменяют способ настройки начального состояния.

При использовании классов ES6 вы должны инициализировать состояние в constructor.

При использовании React.createClass вы должны использовать функцию getInitialState.

Синтаксис класса ES6:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state, this is ES6 syntax (classes) */ };
  }
}

Синтаксис ES5 React.CreateClass:

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

Они будут работать одинаково, чтобы настроить начальное состояние.

Ответ 2

С синтаксисом class MyClass extends React.Component{...}

вы не можете использовать mixins, и вам нужно привязать контекст метода самостоятельно

class MyClass extends Component {
   constructor() {
     super();
     this.handleClick.bind(this);
   }

   handleClick() {
     this.setState(...);
   }
}

для меня это самые большие различия.

чтобы заменить mixin, вы можете использовать Container для упаковки вашего компонента

export default Container(MyClass);

function Container(Component) {
   var origin = Component.prototype.componentDidMount;
   Component.prototype.componentDidMount = function() {
      origin.apply(this, arguments);
      /* do mixin */
   }
}

Ответ 3

Один из основных отличий, не упомянутый выше, заключается в том, как state наследуется при использовании createClass vs extending a Component.

var BaseComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      foo: 'bar'
    };
  }
});

var BaseClass = React.createClass({
  getInitialState() {
    return {
      foo: 'bar'
    };
  }
});

class Test extends BaseClass { // or extend BaseComponent
  constructor(props){
    super(props);
    this.state = {
      ...this.state,
      myNewVar: 'myNewVal'
    }

  render() {
    alert(this.state.foo)
  }
}

Ответ 4

React.createClass

Здесь у нас есть константа с классом React, назначенная с важной функцией отображения, следующей для завершения типичного определения базового компонента.

import React from 'react';

const Contacts = React.createClass({
    render() {
    return (
    <div></div>
   );
  }
});

export default Contacts;

React.Component

Давайте рассмотрим приведенное выше определение React.createClass и преобразуем его в класс ES6.

import React from 'react';

class Contacts extends React.Component {
  constructor(props) {
  super(props);
  }
    render() {
    return (
    <div></div>
  );
 }
}

export default Contacts;

С точки зрения JavaScript в настоящее время используются классы ES6, обычно это будет использоваться с чем-то вроде Babel для компиляции ES6 на ES5 для работы в других браузерах. С этим изменением мы вводим конструктор , где нам нужно вызвать super(), чтобы передать реквизиты React.Component.

Для изменений React теперь создаем класс, называемый "Контакты", и расширять от React.Component вместо доступа к React.createClass, в котором используется меньше шаблона React и больше JavaScript. Это важное изменение, чтобы отметить дальнейшие изменения, возникающие при смене синтаксиса.

Подробнее