历史和版本

React 已经存在足够长的时间，经历了几个不同的时代。了解这段历史的大致轮廓，能帮助你读懂野生代码。一份 2017 年的教程和一份今天的教程，虽然都是讲 React，但看起来可能完全不同。本章带你走一遍时间线，解释你会遇到的两种写法。

简要时间线

React 诞生于 Facebook，当时需要让大型、数据密集的界面保持同步，又不想陷入手动 DOM 更新的泥沼。它在 2013 年作为开源项目发布，核心理念是：根据当前数据描述 UI，让 React 处理更新。这个理念从未改变。围绕这个核心，React 的其他几乎一切都在演进。

最初的几年里，一个需要记住状态的组件是用 JavaScript class 写的。Class 是普通的 JavaScript 特性，React 用它让组件有地方存放随时间变化的数据，还有一套特殊命名的方法供 React 在特定时刻调用：组件首次出现时、更新时、被移除时。这种风格曾是默认选择，这也是为什么现存这么多 React 代码都是这样写的。

大转变来自 Hooks，它在 2019 年初的 React 16.8 中推出。Hook 是 React 给你的函数，让普通函数组件能做之前只有 class 才能做的事，比如在多次渲染之间记住一个值。写组件变得简洁得多，函数组件很快成了新代码的默认选择。Hooks 后面会详细介绍。现在要记住的是，Hooks 让现代写法成为可能。

React 之后还在不断演进：React 18 在 2022 年发布，React 19 在 2024 年发布，每个版本都增加了新能力、磨平了一些粗糙的地方。这些版本对构建真实应用最有意义，后续相关章节会讲到。

这就是整体的弧线。你不需要死记日期。重要的是，React 有段长历史，核心原理保持稳定，写法已经明确转向函数组件和 Hooks。

野生代码中的两种写法

正因为这段历史，你会遇到两种明显不同的 React 写法。

较早的写法把组件写成 class。数据存在 class 里，React 在组件生命周期的特定时刻调用特殊命名的方法。大量生产代码仍以这种方式运行，许多老教程、博客文章和 Stack Overflow 答案都是这样写的。它仍然有效，仍然被支持。它只是写 React 的早期方法。

旧风格长什么样

本课程不教这种风格，你也不需要写它。但值得认得出来，因为你会遇上。老代码库里的组件看起来大概这样：

jsx

class Counter extends React.Component {
  state = { count: 0 }

  componentDidMount() {
    // React 会调用这个，就在组件首次出现在屏幕后
  }

  render() {
    return <button>点击了 {this.state.count} 次</button>
  }
}

三个特征标记它：顶部的 class 和 extends React.Component，用 this.state 存放变化的数据，以及 component 开头的方法名供 React 在特定时刻自动调用。

现代写法把组件写成函数，用 Hooks 赋予它记忆力和响应变化的能力。新的 React 代码都是这样写的，官方文档现在也首先教的是这种方法。

本课程教的是现代 React：始终用函数组件和 Hooks。在你可能碰到旧式 class 写法的地方，不管是工作里的代码库还是老教程，我们会指出来，这样两种写法在你脑子里就能对应上，也不会被其中任何一个打懵。

从这里开始，课程用现代风格构建，Components 是正式开始的地方：一个函数形式的组件返回 UI 的一部分。在任何东西运行之前，你需要在自己的机器上安装 React 并让它运行。

Juno两种写法，一个 React 如果你找到一份教程，组件是用 class 配 this.state 和 componentDidMount 写的，别慌，也别觉得自己做错了。那是 React 的旧风格，它仍然有效。

本课程用的是新风格，函数组件配 Hooks，我会在我们经过旧式写法时指出来，这样不会有什么让你措手不及。

接下来：搭建 React 项目，你会在自己的机器上跑起 React。

历史和版本 ​

简要时间线 ​

野生代码中的两种写法 ​

历史和版本

简要时间线

野生代码中的两种写法