Сравнение React с ES5 и React с ES6
Синтаксисы ES5 и ES6 очень схожи, и если на какое-то время забросить JavaScript (или вообще не знать JS), то их легко спутать.
Когда я изучал React в 2016 году, мне все время казалось, что я пытаюсь усидеть на двух стульях, переходя от примеров и пособий, написанных на ES5 JavaScript к схожему, но все же другому синтаксису ES6 JavaScript. Если вы в последнее время (или вообще) не работали на JavaScript, то скорее всего легко запутаетесь между этими стилями. Более того, вы можете потратить много времени на чтение статьи, прежде чем поймете, какой именно синтаксис (ES5 или ES6) в ней используется, и заметите различия.
Изучая React, я, как и все новички, то и дело вставлял код, написанный в стиле ES5 в приложение, использующее ES6, что приводило к ошибкам и хаосу. При тщательном сравнении обоих стандартов JS легко распознать их отличия, а значит и определить, насколько актуальна та или иная статья и не тратить свое время на чтение устаревшей информации.
В процессе изучения новой технологии или фреймворка я разрабатываю примеры приложений. Чтобы сравнить между собой ES5 и ES6, я решил написать одно и тоже приложение дважды, используя фреймворк React для обоих стандартов.
Вот небольшой ликбез сходных черт и различий обоих стандартов (наверняка есть и другие, но мне пока известны только эти).
Во-первых, содержание index.html для обоих приложений примерно одинаково. Мне пришлось лишь вручную включить в ES5-версию слева стандартный файл bundle.js. В стандарте ES6 скрипты из пакета create-react-app делают это автоматически:
Далее, оба файла index.js для установки корневого компонента-контейнера практически идентичны. Единственное отличие состоит в том, что JavaScript ES5 использует синтаксис модуля RequireJS, тогда как в стандарте ES6 задействованы операторы import, как видно в примере:
Теперь перейдем к компоненту AppContainer.
React в стандарте ES5:
- Использует React.createClass() API.
- Определяет состояние компонента с помощью getInitialState().
- Экспортирует компонент в качестве модуля с помощью module.exports.
React в стандарте ES6:
- Использует класс ES6.
- Определяет состояние компонента, используя this.state в функции constructor().
- Экспортирует компонент в качестве модуля по умолчанию.
Функция render() одинакова в обоих вариантах.
В компоненте CalculatorComponent проявляются более существенные различия:
React в стандарте ES5:
- Props используются неявно.
- Неявная привязка оператора «this» к функциям.
React в стандарте ES6:
- Props передаются в компонент через constructor().
- Явная привязка оператора «this» к функциям в конструкторе с помощью this.functionname.bind(this).
Вот и все! Надеюсь, эта статья окажется полезной для сравнения обоих стандартов. Вы можете клонировать приведенные примеры приложений из моего репозитория на GitHub здесь.
В настоящий момент я все еще нахожусь в процессе обучения. Если я где-то ошибся или что-то неправильно понял, пожалуйста, дайте мне об этом знать в комментариях!