ReactJS - 不使用 ES6 ECMAScript

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

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

React 应用可以使用 ES6 语言规范进行开发。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 语法实现相同的功能：

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 组件类中定义的事件处理程序方法需要在类构造函数中绑定到 this 对象。伪代码如下所示

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

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

打印页面