与 ES5 相比，ReactJS ES6 语法有何不同？

在本文中，我们将了解 ReactJs 中 ES6 和 ES5 语法的区别。 ES6 和 ES5 都是开发行业中的 Javascript 脚本语言。 ECMA Script 或 ES 是 ECMA International 制作的商标脚本语言。欧洲计算机制造协会或 ECMA 用于万维网的客户端脚本。 ES5 于 2009 年发布，ES6 于 2015 年发布。ES5 很好但很长。新的 ES6 在代码优化和可读性方面是对 ES5 的重大更新和增强。

ES5：

• ES5 的完整形式是 ECMA Script 5，于 2009 年开发。
• 此处允许的数据类型有number、 字符串、null、Boolean、undefined 、 和符号。
• ES5 使用require模块来导入我们脚本文件中的任何成员模块。

句法：

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

• 在 ES5 中，我们只能使用var来定义全局范围内的变量。
• Es5 使用module.exports关键字将任何组件导出为模块。

句法：

module.exports = Component; // ES5

• ES5 使用函数关键字和 return 关键字来定义一个函数。

句法：

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

• ES5 使用createReactClass()或React.createClass() API 创建一个 react 组件类，并使用getInitialState()方法定义一个 react 组件状态。
• 对象操作的处理速度很慢。
• ES5 的性能缺乏新特性，因此相对较低。
• ES5 拥有巨大的社区支持，因为它已经被使用了很长时间。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

示例：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

示例 1：使用 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 (
      

        
          Count increase
        
        
 {this.state.counter} 
        
          Count decrease
        
      
    );
  },
});
  
// ES5 Syntax
var Component = createReactClass({
  render: function () {
    return (
      

        
      
    );
  },
});
  
ReactDOM.render(, 
    document.getElementById("root"));

输出：

ES6：

• ES6 的完整形式是 ECMA Script 6，于 2015 年发布。
• 此处允许的数据类型有number、 字符串、null、Boolean、undefined 、 和符号。
• ES6 使用导入模块来导入我们脚本文件中的任何成员模块。

句法：

import React from 'react'; // ES6

• 在 ES6 中，我们还可以使用 let 和const在本地定义一个变量。
• Es5 使用export default关键字将任何组件导出为模块。

句法：

export default Component; // ES6

• 在 ES6 中，我们不需要使用函数关键字来定义函数。在 ES6 中使用 Arrow函数使其更加紧凑。这些是由“=>”语法描述的函数。

句法：

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

• ES6 使用扩展React.Component的 ES6 类，并在 constructor() 中使用this.state定义反应组件状态。
• 由于对象破坏，对象操作很快。此过程通过允许其模式匹配来加强绑定模式。
• 由于添加了高级功能和代码优化，ES6 提供了高性能。
• ES6 的社区支持少于 ES5，因为它是 ES5 的最新更新，并非所有浏览器都支持它。

示例 2：使用 React 的 ES6 语法

在 - 的里面 索引。 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 (
        

          
        
      );
    }
  };
  
// ES6 Syntax
const Button = (props) => {
  return (
    

      
        Count increase
      
      
 {props.counter} 
      
        Count decrease
      
    
  );
};
  
// ES6 Syntax
let CompClick = CountComp(Button);
  
const Component = () => {
  return (
    

      
    
  );
};
  
ReactDOM.render(, 
  document.getElementById("root"));

输出：

ES5 和 ES6 的区别：

	React’s ES5	React’s ES6
1.	The full form of ES5 is ECMA Script 5.	The full form of ES6 is ECMA Script 6.
2.	Data types supported: number, string, null, Boolean and undefined	Data types supported: number, string, null, Boolean, undefined, and Symbol.
3.	ES5 uses var to declare a variable.	ES6 has an additional feature called let and const for defining a variable.
4.	In ES5 we cannot import a JSX file to another file.	In ES6 we can import a jsx file to another file
5.	ES5 uses the Require js module to include a react module or a component.	ES6 uses the import module to include a react module or a component.
6.	ES5 uses the function keyword along with the return keyword to define a function.	In ES6 we don’t need to use a function keyword to define a function. The use of the Arrow function in ES6 makes it more compact.
7.	Props are implicitly defined in ES5 and we implicitly bind “this” to functions.	In ES6 we pass the props explicitly through the constructor() and we explicitly bind “this” to functions inside the constructor.
8.	Es5 don’t need the use of transpiler like babel	Es6 needs the use of transpiler like babel
9.	In ES5 we need to use commas to separate functions or methods within classes.	In ES6 we don’t need to use commas to separate functions or methods within classes.
10.	Object manipulation is slow for processing..	Object manipulation is fast because of object destructuring.
11.	ES5 lacks new features for its performance so it is comparatively low.	ES6 provides high performance due to advanced features added to it and code optimization.
12.	ES5 has huge community support as it is has been used since a long.	ES6 has less community support than ES5 as it is a recent update on ES5.