ReactJS - 没有 ES6 ECMAScript 的 React

---

---

根据 Ecma International，ECMAScript 是一种通用的、供应商中立的和跨平台的编程语言。Ecma International 定义了 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-class 包安装到我们新创建的应用程序中，如下所示 -

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

让我们看看如何使用 ES5 （myapp/src/components/ES5/HelloWorldES6.js） 和 ES6 语法 （myapp/src/components/ES5/HelloWorldES6.js） 创建一个简单的 你好 世界组件，并了解使用 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 对象。