ReactJS ES6语法与ES5有何不同

ReactJS ES6语法与ES5有何不同

在本文中,我们将学习ReactJs中ES6和ES5语法之间的确切区别。ES6和ES5都是开发行业中的JavaScript脚本语言。ECMAScript或ES是由ECMA International制定的商标脚本语言。欧洲计算机制造协会或ECMA用于全球范围内的客户端脚本。ES5于2009年发布,ES6于2015年发布。ES5很好但很冗长。全新的ES6在代码优化和可读性方面是ES5的一次重大更新和提升,换句话说,ES6的语法使得长而冗杂的代码变得更短、更容易理解和掌握。

ES5:

  • ES5的全称是ECMAScript 5,发布于2009年。
  • 允许使用的数据类型有数字、字符串、null、布尔、undefined和符号。
  • ES5使用 require 模块来导入我们脚本文件中的任何成员模块。

    语法:

var React = require('react'); // ES5
JavaScript
  • 在ES5中,我们只能使用 var 来定义全局作用域中的变量。
  • Es5使用 module.exports 关键字将任何组件导出为模块。

语法:

module.exports = Component; // ES5
JavaScript
  • ES5使用function关键字和return关键字来定义函数。

语法:

// ES5
var sum = function(x, y) {
    return x + y;
};
JavaScript
  • ES5使用 createReactClass()React.createClass() API 来创建React组件类,并使用 getInitialState() 方法定义了一个React组件的状态。
  • 对象操作处理速度较慢。
  • ES5缺乏性能方面的新特性,相对较低,使得其可读性较差(随着时间的推移)。
  • ES5有着庞大的社区支持,因为它已经被使用了很长时间。

创建React应用并安装模块:

步骤1: 使用以下命令创建一个React应用:

npx create-react-app foldername
JavaScript

步骤2: 创建项目文件夹,即文件夹名称,在使用以下命令进入该文件夹:

cd foldername
JavaScript

项目结构: 它会看起来像下面这样。

ReactJS ES6语法与ES5有何不同

示例: 现在在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 (
      <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"));
JavaScript

ES6:

  • ES6的全称是ECMA Script 6,于2015年发布。
  • 允许的数据类型有数字、字符串、空值、布尔值、未定义和符号。
  • ES6使用 import 模块来在我们的脚本文件中导入任何成员模块。

语法:

import React from 'react'; // ES6
JavaScript
  • 在ES6中,我们还可以使用let和 const 来在局部定义变量。
  • Es5使用 export default 关键字将任何组件导出为模块。

语法:

export default Component; // ES6
JavaScript
  • 在ES6中,我们不需要使用function关键字来定义函数。ES6中的箭头函数的使用使得函数更加简洁。箭头函数通过‘=>’语法来描述。

语法:

var sum = (x,y)=>{ return x+y };// ES6
JavaScript
  • ES6使用ES6类来扩展 React.Component ,并通过在构造函数中使用 this.state 来定义一个React组件状态。
  • 对象操作非常快速,因为它使用了对象解构。这个过程通过允许模式匹配来加强绑定模式。
  • ES6由于增加了许多先进特性和代码优化而具有很高的性能。
  • 与ES5相比,ES6的社区支持较少,因为它是对ES5的最新更新,不是所有浏览器都支持它。

示例2:使用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"));
JavaScript

输出:

ES5和ES6之间的区别:

ID React的ES5 React的ES6
1 ES5的全称是ECMA Script 5。 ES6的全称是ECMA Script 6。
2 支持的数据类型:number、string、null、Boolean和undefined。 支持的数据类型:number、string、null、Boolean、undefined和Symbol。
3 ES5使用var来声明变量。 ES6有一个额外的特性,叫做let和const来定义变量。
4 在ES5中,我们不能将一个JSX文件导入到另一个文件中。 在ES6中,我们可以将.jsx文件导入到另一个文件中。
5 ES5使用Require js模块来包含一个react模块或组件。 ES6使用import模块来包含一个react模块或组件。
6 ES5使用function关键字和return关键字来定义函数。 在ES6中,我们不需要使用function关键字来定义函数。ES6中的箭头函数使得代码更加简洁。
7 在ES5中,props是隐式定义的,我们会隐式绑定“this”到函数上。 在ES6中,我们通过constructor()显式传递props,然后在构造函数内部显式绑定“this”到函数上。
8 ES5不需要使用像babel这样的转译器。 ES6需要使用像babel这样的转译器。
9 在ES5中,我们需要使用逗号来分隔类中的函数或方法。 在ES6中,我们不需要使用逗号来分隔类中的函数或方法。
10 对象操作的处理速度较慢。 由于对象解构的存在,对象操作速度较快。
11 ES5在性能方面缺乏新特性,所以相对较低。 ES6由于添加了先进的特性和代码优化,提供了高性能。
12 ES5有强大的社区支持,因为它已经使用了很长时间。 相比ES5,ES6的社区支持较少,因为它是对ES5的最新更新。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册