ReactJS - 使用非ES6 ECMAScript的React

您好，有抱負的程序员們！今天，我們將踏上一段令人興奮的旅程，探索ReactJS的世界，但有個小转折——我們將不使用ES6。別擔心，如果你還不知道ES6是什麼，我們會在進行的過程中解釋一切。想像我們正在建造一臺時間機器，帶我們回到React的早期日子。準備好了嗎？讓我們一起跳水吧！

React是什麼，我們為何要學習“老”方法？

React是一個流行的JavaScript庫，用於構建用戶界面。它就像樂高積木對於網頁開發者一樣——你創建小巧、可重用的部件（組件），並將它們組合起來構建複雜的應用程序。

現在，你可能會想，“我們為何要學習不使用ES6的React？” 嗎？親愛的學生們，這就像在學習自動挡汽車之前先學習手動挡一樣。它讓你更深入地理解事物在底層是如何工作的。此外，你可能會遇到使用這種語法的較老代碼庫，所以熟悉它是很有用的。

創建React類（create-react-class）

在ES6之前的React世界裡，我們使用一個叫做createReactClass的東西來創建組件。讓我們看一個簡單的例子：

var React = require('react');
var createReactClass = require('create-react-class');

var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});

讓我們分解一下：

1. 我們正在引入（導入）React和create-react-class包。
2. 我們使用createReactClass創建了一個名為Greeting的組件。
3. 在組件內部，我們定義了一個render函數，它返回JSX（你所看到的類似HTML的語法）。

如果我們使用ES6，那麼同樣的組件會看起來像這樣：

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

看到差別了嗎？createReactClass的方式可能看起來有點冗長，但它有一些我們將在下文中探索的獨特特性。

為Props設置默認值（getDefaultProps）

在React中，我們經常想要為props設置默認值。使用createReactClass，我們使用一個特別的方法叫做getDefaultProps。這是它的工作原理：

var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'World'
};
},
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});

在這個例子中：

1. 我們定義了一個getDefaultProps函數，它返回一個對象。
2. 這個對象包含了我們props的默認值。
3. 如果在使用這個組件時沒有提供name prop，它將默認為'World'。

所以，如果我們使用<Greeting />，它將渲染"Hello, World!"。但如果我们使用<Greeting name="Alice" />，它將渲染"Hello, Alice!"。

在ES6 React中，我們會使用靜態屬性達到同樣的效果：

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

設置初始狀態（getInitialState）

狀態就像組件的個人數據存儲。使用createReactClass，我們使用getInitialState設置初始狀態：

var Counter = createReactClass({
getInitialState: function() {
return {
count: 0
};
},
incrementCount: function() {
this.setState({
count: this.state.count + 1
});
},
render: function() {
return (
<div>
<p>計數：{this.state.count}</p>
<button onClick={this.incrementCount}>增加</button>
</div>
);
}
});

讓我們分解一下：

1. getInitialState返回一個定義初始狀態的對象。
2. 我們將初始count設為0。
3. 我們有一個incrementCount函數來更新狀態。
4. 在render方法中，我們顯示計數和一個按鈕來增加它。

在ES6 React中，我們通常會在構造函數中設置初始狀態：

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// ... 組件的其他部分
}

方法對比

這裡有一個方便的表格，對比了我們討論過的方法：

createReactClass	ES6 Class	目的
getDefaultProps	static defaultProps	設置默認prop值
getInitialState	constructor	設置初始狀態
render	render	渲染組件

結論

好了，各位！我們一起回到了過去，探索了不使用ES6的React。記住，理解這些概念會讓你成為一個更全面的React開發者。這就像了解一門語言的歷史——它讓你對現代特性有更深的欣賞。

當我們結束時，我想到一個故事。曾經，我正在一個遺留項目上工作，那個項目使用了這種較老的語法。我的團隊成員都感到困惑，但多虧我理解這些基本知識，我得以像React超級英雄一樣介入，並拯救了那一天！

持續練習，保持好奇心，在你意識到之前，你將會使用React構建驚人的事物——無論是使用舊語法還是新語法。開心編程，願你的組件總是能完美渲染！

Credits: Image by storyset