React.createClass или React.Component кой подход да се възприеме?

Разгледахме две книги за реакцията: „React Up & Running“ от Стоян Стефанов и „Pro React“ от Касио де Соуса Антонио.

Стоян използва основно React.createClass, докато класът на Cassio ContactsApp разширява Component.

Защо има няколко подхода и кой да изберете?

Накратко: React.createClass е оригиналният собствен API за реагиране, докато React.Component е ES6 синтаксис. В бъдеще Facebook планира да се откаже от createClass в полза на класовете ES6.

Разлики между React.createClass или React.Component

React.createClass
propTypes се съхраняват като обект, изброяващ типовете на всяко от свойствата.

getDefaultProps - функция, която връща обект с начален реквизит

Въпреки че използвах getInitialState, тази техника също работи за мен (този подход е използван в книгата на Стоян Стефанов):

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

Първоначалните реквизити са декларирани като свойство на обекта "defaultProps" (без получаване)

Вторият подход изглежда по-удобен, защото се използват класически трикове на javascript.

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

React.Component
Началните състояния се декларират в конструктора (което отново е по-близо до каноничния javascript)

Конструктор
Super () в конструктора се извиква, за да предаде подпори на създадения реагиращ компонент.

Разлики "това"

React.createClass
Стойностите от това се обвързват автоматично (но може да се променят, ако се използва ES6). когато се извика handleClick, този клас се предава на функцията:

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

Има няколко начина да се обвърже това.

Друг начин да промените контекста на this.handleClick е да го поставите в конструктора. Този метод е добър, защото не докосваме кода в JSX:

Mixins не се поддържат при писане на компоненти в ES6

React.createClass
Mixins са обвързани с класа от свойство на обекта на класа със специалното име 'mixins'. Това свойство съхранява масив от необходимите комбинации:

Отново Facebook планира да се откаже от createClass в бъдеще в полза на класовете ES6. Това е оправдано, защото вторият подход ще използва класически синтаксис на javascript и ще поддържа новия стандарт ES6.