Чем синтаксис ReactJS ES6 отличается от ES5?

В этой статье мы узнаем разницу между синтаксисами ES6 и ES5 в ReactJs. И ES6, и ES5 являются языками сценариев Javascript в индустрии разработки. ECMA Script или ES — это язык сценариев, охраняемый торговой маркой, созданный ECMA International. Европейская ассоциация производителей компьютеров или ECMA используется для написания сценариев на стороне клиента для всемирной сети. ES5 был выпущен в 2009 году, а ES6 — в 2015 году. ES5 был хорошим, но длинным. Новый ES6 — это крупное обновление и усовершенствование ES5 с точки зрения оптимизации кода и удобочитаемости.

Содержание

ES5
Создание приложения React и установка модуля
Пример: Использование синтаксиса React ES5
ES6
Пример: Использование синтаксиса React ES6
Разница между ES5 и ES6

ES5

Полная форма ES5 — это ECMA Script 5, который был разработан в 2009 году.
Datatypes разрешено здесь число, строка, NULL, Boolean, неопределенные, и символ.
ES5 использует модуль requireдля импорта любого модуля-члена в наш файл сценария.

Синтаксис:

var React = require('react'); // ES5

В ES5 мы можем использовать varтолько для определения переменной в глобальной области видимости.
Es5 экспортирует любой компонент как модуль, используя ключевое слово exports.

Синтаксис:

 module.exports = Component; // ES5

ES5 использует ключевое слово function вместе с ключевым словом return для определения функции.

Синтаксис:

// ES5
var sum = function(x, y) {
    return x + y;
};

ES5 использует API createReactClass ()или createClass () для создания класса компонента реакции и определяет состояние компонента реакции с помощью метода getInitialState ().
Обработка объектов выполняется медленно.
ES5 не хватает новых функций для своей производительности, поэтому она сравнительно низкая.
ES5 пользуется огромной поддержкой сообщества, поскольку используется уже давно.

Создание приложения React и установка модуля

Шаг 1: Создайте приложение React, используя следующую команду:

npx create-react-app foldername

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

cd foldername

Структура проекта: это будет выглядеть следующим образом.

Пример. Теперь запишите следующий код в файл App.js. Здесь App — это наш компонент по умолчанию, в котором мы написали наш код.

Пример: Использование синтаксиса React ES5

Внутри файла index.js

Javascript

var React = require("react"); // ES5

var ReactDOM = require("react-dom"); // ES5

var createReactClass = require("create-react-class"); // ES5

// ES5 Syntax

var CountComp = createReactClass({

  getInitialState: function () {

    return {

      counter: 0,

    };

  },

  Increase: function () {

    this.setState({

      counter: this.state.counter + 1,

    });

  },

  Decrease: function () {

    this.setState({

      counter: this.state.counter - 1,

    });

  },

  render: function () {

    return (

      <div>

        <button onClick={this.Increase}>

          Count increase

        </button>

        <h1> {this.state.counter} </h1>

        <button onClick={this.Decrease}>

          Count decrease

        </button>

      </div>

    );

  },

});

// ES5 Syntax

var Component = createReactClass({

  render: function () {

    return (

      <div>

        <CountComp />

      </div>

    );

  },

});

ReactDOM.render(<Component />,

    document.getElementById("root"));

ES6

Полная форма ES6 — это ECMA Script 6, опубликованная в 2015 году.
Datatypes разрешено здесь число, строка, NULL, Boolean, неопределенные, и символ.
ES6 использует модуль импорта для импорта любого модуля-члена в наш файл сценария.

Синтаксис:

import React from 'react'; // ES6

В ES6 мы также можем использовать let и constдля локального определения переменной.
Es5 экспортирует любой компонент как модуль, используя ключевое слово экспорта по умолчанию.

Синтаксис:

export default Component; // ES6

В ES6 нам не нужно использовать ключевое слово function для определения функции. Использование функции стрелки в ES6 делает его более компактным. Это функция, описываемая синтаксисом ’=>’.

Синтаксис:

var sum = (x,y)=>{ return x+y };// ES6

ES6 использует класс ES6, который расширяет Componentи определяет состояние компонента реакции, используя this.state в конструкторе ().
Манипулирование объектами происходит быстро из-за разрушения объекта. Этот процесс усиливает шаблон привязки, позволяя сопоставить его с образцом.
ES6 обеспечивает высокую производительность благодаря добавленным расширенным функциям и оптимизации кода.
ES6 имеет меньшую поддержку сообщества, чем ES5, поскольку это недавнее обновление ES5, и не все браузеры его поддерживают.

Пример: Использование синтаксиса React ES6

Внутри index. js файл

Javascript

import React from "react"; // ES6

import ReactDOM from "react-dom"; // ES6

let CountComp = (Compprop) =>

  class extends React.Component {

    constructor(props) {

      super(props);

      this.state = {

        counter: 0,

      };

      this.Increase = this.Increase.bind(this);

      this.Decrease = this.Decrease.bind(this);

    } // ES6 Syntax

    // ES6 Syntax

    Increase() {

      this.setState({

        counter: this.state.counter + 1,

      });

    }

    Decrease() {

      this.setState({

        counter: this.state.counter - 1,

      });

    }

    render() {

      return (

        <div>

          <Compprop

            {...this.state}

            increase={this.Increase}

            decrease={this.Decrease}

          />

        </div>

      );

    }

  };

// ES6 Syntax

const Button = (props) => {

  return (

    <div>

      <button onClick={props.increase}>

        Count increase

      </button>

      <h1> {props.counter} </h1>

      <button onClick={props.decrease}>

        Count decrease

      </button>

    </div>

  );

};

// ES6 Syntax

let CompClick = CountComp(Button);

const Component = () => {

  return (

    <div>

      <CompClick />

    </div>

  );

};

ReactDOM.render(<Component />,

  document.getElementById("root"));

Разница между ES5 и ES6

	ES5 от React	ES6 от React
1.	Полная форма ES5 — это ECMA Script 5.	Полная форма ES6 — это ECMA Script 6.
2.	Поддерживаемые типы данных: число, строка, null, логическое значение и неопределенное значение.	Поддерживаемые типы данных: число, строка, null, логическое значение, неопределенное значение и символ.
3.	ES5 использует var для объявления переменной.	В ES6 есть дополнительная функция let и const для определения переменной.
4.	В ES5 мы не можем импортировать файл JSX в другой файл.	В ES6 мы можем импортировать файл jsx в другой файл
5.	ES5 использует модуль Require js для включения модуля реакции или компонента.	ES6 использует модуль импорта для включения модуля реакции или компонента.
6.	ES5 использует ключевое слово function вместе с ключевым словом return для определения функции.	В ES6 нам не нужно использовать ключевое слово function для определения функции. Использование функции стрелки в ES6 делает его более компактным.
7.	Свойства неявно определены в ES5, и мы неявно привязываем this к функциям.	В ES6 мы явно передаем свойства через конструктор () и явно привязываем this к функциям внутри конструктора.
8.	Es5 не требует использования транспилятора, такого как Babel	Es6 требует использования транспайлера, такого как babel
9.	В ES5 нам нужно использовать запятые для разделения функций или методов внутри классов.	В ES6 нам не нужно использовать запятые для разделения функций или методов внутри классов.
10.	Обработка объектов выполняется медленно.	Манипулирование объектами происходит быстро из-за деструктуризации объекта.
11.	ES5 не хватает новых функций для своей производительности, поэтому она сравнительно низкая.	ES6 обеспечивает высокую производительность благодаря добавленным расширенным функциям и оптимизации кода.
12.	ES5 пользуется огромной поддержкой сообщества, поскольку используется уже давно.	ES6 имеет меньшую поддержку сообщества, чем ES5, поскольку это недавнее обновление ES5.