React 类组件

React 自 2013 年以来发生了巨大变化。其库的迭代、React 应用的编写方式，尤其是组件的形式都经历了显著演变。然而，过去几年中构建了大量 React 应用，因此并非所有代码都是基于当前的最佳实践设计的。本课程章节将介绍 React 的遗留特性。

我不会涵盖 React 中所有被视为遗留的内容，因为某些功能已被多次重构。你可能在较老的 React 应用中看到某个功能的旧版本，但它很可能与当前实现有所不同。

在本节中，我们将对比 现代 React 应用 与其 遗留版本，并会发现现代与遗留 React 之间的大多数差异源于类组件（class components）和函数组件（function components）的不同。

注意： 本章末尾将展示现代 React 应用及其遗留版本的实际运行效果。

React 类组件

React 组件经历了多次演进，从早期的 createClass 组件，到 类组件，再到如今主流的 函数组件。在当前的 React 项目中，仍有可能同时看到类组件和现代函数组件共存的情况。

以下是一个典型的类组件示例：

1class InputWithLabel extends React.Component {
2  render() {
3    const {
4      id,
5      value,
6      type = 'text',
7      onInputChange,
8      children,
9    } = this.props;
10
11    return (
12      <>
13        <label htmlFor={id}>{children}</label>
14        &nbsp;
15        <input
16          id={id}
17          type={type}
18          value={value}
19          onChange={onInputChange}
20        />
21      </>
22    );
23  }
24}

一个典型的类组件是一个 JavaScript 类，必须包含一个 render 方法，用于返回 JSX。该类通过继承 React.Component 来获取 React 组件的所有特性（例如用于状态管理的 state，以及用于处理副作用的生命周期方法）。在类组件中，通过类实例（this）访问 props。

在一段时间内，类组件是编写 React 应用的主流选择。后来函数组件被引入，两者曾长期并存，各自承担不同用途：

1const InputWithLabel = ({
2  id,
3  value,
4  type = 'text',
5  onInputChange,
6  children,
7}) => (
8  <>
9    <label htmlFor={id}>{children}</label>
10    &nbsp;
11    <input
12      id={id}
13      type={type}
14      value={value}
15      onChange={onInputChange}
16    />
17  </>
18);

在 2018 年之前——即 React Hooks 出现之前，函数组件无法处理副作用（如 useEffect 钩子）或状态（如 useState / useReducer 钩子）。因此，这些组件被称为 无状态函数组件（functional stateless components），仅用于接收 props 并输出 JSX。如果需要使用状态或副作用，就必须将函数组件重构为类组件。当不需要状态或副作用时，则可选择更轻量的函数组件而非类组件。

随着 React Hooks 的引入，函数组件也能像类组件一样管理状态和副作用。由于两者在功能上已无实质差异，社区普遍转向使用更为简洁轻量的函数组件。

练习：

• 进一步了解 JavaScript 类。
• 阅读更多关于 如何从类组件重构为函数组件 的内容。
• 了解一种不同的 类组件语法，虽不流行但更高效。
• 深入学习 类组件的相关文档。
• 阅读更多关于 React 中其他 遗留与现代组件类型 的内容。