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 物件。

列印頁面