React.Component vs React.createClass

Question

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

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

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

React.Component

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

React.createClass

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

Answer 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 
    }; 
    } 

    ... 
} 

или если вы используете transpiler как Бабель, вы можете получить

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 покупает это Примеси, но afaik все, что вы могли бы сделать с mixins, можно сделать с помощью контекста и более высоких упорядоченных компонентов.

Answer 2

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

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

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

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

MyComponent extends React.Component { 
    ... 
} 

Answer 3

Это выглядеть Реагировать рекомендуют нам использовать React.createClass

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

1. MyComponent extends React.Component не поддерживается getInitialState()

2. Использование .bind(this) в React.createClass вы получите это

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

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

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

Примечание: Реагировать сейчас 0.14.3

Answer 4

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

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

Несколько различий между оба,

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

var MyComponent = React.createClass({ }); 

React.Component:

export default class MyComponent extends React.Component{ } 

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

конструктор(): React.createClass: No 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 {} } 
}); 

среагировать.Компонент:

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 

это:
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>