ReactJS - 不使用ES6的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>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</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