React.Component vs React.createClass

Я смущен, какая разница между компонентом и классом реагирования?

И когда я использую компонент над классом реагирования? Похоже, что компонент - это класс, а createClass создает компонент.

https://facebook.github.io/react/docs/top-level-api.html

React.Component

Это базовый класс для React Components, когда они определены с помощью ES6. См. "Повторно используемые компоненты" для использования классов ES6 с React. Для каких методов фактически предоставляется базовый класс, см. API компонентов.

React.createClass

Создайте класс компонента с учетом спецификации. Компонент реализует метод рендеринга, который возвращает один единственный. Этот ребенок может иметь произвольно глубокую детскую структуру. Одна вещь, которая делает компоненты, отличные от стандартных прототипальных классов, - это то, что вы не нужно называть их новыми. Это удобные обертки, которые создайте экземпляры поддержки (через новые) для вас.

Ответы

Ответ 1

Единственными React.createClass функциями, которые не поддерживаются MyComponent extends React.Component, являются mixins.

сделать getInitialState() вы можете:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // initial state
    this.state = {
      counter: 0
    };
  }

  ...
}

или если вы используете транспилер вроде babel, вы можете получить

class MyComponent extends React.Component {
  state = {
    counter: 0
  }

  ...
}

Вместо автоматической привязки, предоставляемой createClass, вы можете явно привязать с помощью .bind(this), как показано выше, или использовать синтаксис жирной стрелки ES6:

class MyComponent extends React.Component {
  onClick = () => {
    // do something
  }
  ...
}

Вместо того, чтобы помещать вещи в componentWillMount, вы можете поместить вещи в конструктор так:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // what you would have put in componentWillMount
  }

  ...
}

В самой документации React есть более подробная информация, но в основном единственная дополнительная функциональность, которую React.createClass покупает, это mixins, но afaik все, что вы могли бы сделать с mixins, можно выполнить с помощью контекста и более высоких упорядоченных компонентов.

Ответ 2

Есть 2 способа сделать то же самое.

React.createClass - это функция, которая возвращает класс Component.

MyComponent = React.createClass({
  ...
});

React.Component - это существующий компонент, который вы можете расширить. В основном полезно при использовании ES6.

MyComponent extends React.Component {
  ...
}

Ответ 3

React.createClass - метод создания классов компонентов

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

Мало различий между ними,

Синтаксис: React.createClass:

var MyComponent = React.createClass({ });

React.Component:

export default class MyComponent extends React.Component{ }

getInitialState(): React.createClass: да React.Component: Нет

конструктор(): React.createClass: нет React.Component: Да

propTypes Синтаксис: React.createClass:

var MyComponent = React.createClass({
    propTypes: { }
});

React.Component:

export default class MyComponent extends React.Component{ }
MyComponent.prototypes = { }

Свойства по умолчанию: React.createClass:

var MyComponent = React.createClass({
    getDefaultProps(): { return {} }
});

React.Component:

export default class MyComponent extends React.Component{ }
MyComponent.defaultProps = { }

состояние: React.createClass:

State changes can be made inside getInitialState() function

React.Component:

State changes can be made inside constructor(props) function

this:
React.createClass:

automatically bind 'this' values.
Ex: <div onClick={this.handleClick}></div>
'this' can be accessed by default in handleClick function

React.Component:

whereas here we need to bind explicitly,
Ex: <div onClick={this.handleClick.bind(this)}></div>

Ответ 4

Похоже, что React рекомендует нам использовать React.createClass

Насколько я знаю

MyComponent extends React.Component не поддерживается getInitialState()
Используйте .bind(this) в React.createClass, вы получите это

Предупреждение: bind(): вы привязываете компонентный компонент к компоненту. React делает это для вас автоматически высокопроизводительным способом, поэтому вы можете безопасно удалить этот вызов.

Я думаю, что это может быть больше.

Если кто-то перечислит все функциональные возможности React.createClass, будет очень удобно.

Примечание: в настоящий момент в действии находится значение 0.14.3