ReactJS - 不使用 ES6 ECMAScript

根据 Ecma International，ECMAScript 是一种通用、与供应商无关且跨平台的编程语言。Ecma International 定义了 ECMAScript 语言语法、其特性和语言的各个方面，并将其发布为 ECMAScript 规范。JavaScript 是用于浏览器客户端编程的 ECMAScript 的流行实现之一。

ECMAScript 的最新规范是 ECMAScript 2022，最流行的规范是 ECMAScript 2015 语言规范，也称为 ES6。尽管几乎所有现代浏览器都支持 ES6，但旧版浏览器仍然缺乏对 ES6 的支持。现在，在客户端脚本中使用 ES6 功能被认为是安全的。

可以使用 ES6 语言规范开发 React 应用程序。React 库使用的一些核心 ES6 功能是 ES6 类和 ES6 模块。为了支持不允许 ES5 语法的旧版浏览器，React 提供了使用 ES5 创建组件的替代语法。

创建 React 类 (create-react-class)

create-react-class 是 React 社区提供的一个模块，用于在不使用 ES6 语法的情况下创建新组件。此外，我们应该在当前应用程序中安装 create-react-class 包以使用 ES5 语法。

让我们使用 create-react-app 创建一个 React 应用程序

create-react-app myapp

现在，将 create-react-class 包安装到我们新创建的应用程序中，如下所示 −

npm i create-react-class --save

现在，通过运行以下命令运行应用程序，

cd myapp
npm start

让我们看看如何使用 ES5(myapp/src/components/ES5/HelloWorldES6.js)和 ES6 语法(myapp/src/components/ES5/HelloWorldES6.js)创建一个简单的 hello world 组件，并了解使用时需要做什么ES5 语法。

ES6 语法中的 HelloWorldES6 组件如下 −

import React from 'react'
class HelloWorldES6 extends React.Component {
   render() {
      return <h1>Hello, {this.props.name}</h1>
   }
}
export default HelloWorldES6

可以使用以下代码以 ES5 语法创建相同的组件 (myapp/src/components/ES5/HelloWorldES5.js)，如下所示 −

var createReactClass = require('create-react-class');
var HelloWorldES5 = createReactClass({
   render: function() {
      return <h1>Hello, {this.props.name}</h1>;
   }
});
export default HelloWorldES5;

现在，让我们在我们的应用程序(App.js)中使用该组件，如下所示 −

import HelloWorldES5 from "./components/ES5/HelloWorldES5";
import HelloWorldES6 from "./components/ES5/HelloWorldES6";
function App() {
   return (
      <div>
         <HelloWorldES5 name="Peter" />
         <HelloWorldES6 name="John" />
      </div>
   );
}
export default App;

应用程序的输出如下

设置 props 的默认值 (getDefaultProps)

让我们在 ES6 中为 name props 设置一个默认值。

class HelloWorld extends React.Component {
   render() {
      return <h1>Hello, {this.props.name}</h1>;
   }
}
HelloWorld.defaultProps = {
   name: 'John'
}

使用以下语法可以在 ES5 中实现相同的功能

var createReactClass = require('create-react-class');
var HelloWorld = createReactClass({
   render: function() {
      return <h1>Hello, {this.props.name}</h1>;
   },
   getDefaultProps: function() {
      return {
         name: 'John'
      };
   }
});

这里的getDefaultProps是一个特殊的函数，用来设置组件props的默认值。

设置初始状态(getInitialState)

我们知道，this.state可以在组件类的构造函数中使用，来设置状态的初始值。这是ES6类的特性之一。

import React from 'react'
class BookListES6 extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: ['C++ Programming', 'Java Programming']
      };
   }
   render() {
      return <ol>
         {this.state.list && this.state.list.map((item) =>
            <li>{item}</li>
         )}
      </ol>
   }
}
export default BookListES6

可以使用 ES5 语法中的 getInitialState 实现相同的功能，如下所示 −

var createReactClass = require('create-react-class');
var BookListES5 = createReactClass({
   getInitialState: function() {
      return {
         list: ['React Programming', 'Javascript Programming']
      };
   },
   render: function() {
      return <ol>
      {this.state.list && this.state.list.map((item) =>
         <li>{item}</li>
      )}
      </ol>
   }
});
export default BookListES5;

现在，让我们在我们的应用程序(App.js)中使用该组件，如下所示 −

import BookListES6 from "./components/ES5/BookListES6";
import BookListES5 from "./components/ES5/BookListES5";
function App() {
   return (
      <div>
         <BookListES6 />
         <BookListES5 />
      </div>
   );
}
export default App;

应用程序的输出如下

事件处理程序的自动绑定

我们知道，React 组件类中定义的事件处理程序方法需要在类构造函数中绑定到此对象。伪代码如下

constructor(props) {
   super(props);
   this.state = {message: 'Hello!'};
   // binding of `this` object
   this.handleClick = this.handleClick.bind(this);
}

在 ES5 中，绑定不是必需的，因为函数默认绑定到 this 对象。