历史和版本

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 写法

正因为这段历史，你会遇到两种明显不同风格的 React 代码。

较早的风格用 class 写组件。组件的状态数据存在 class 内部，React 在组件生命周期的特定时刻调用特殊命名的方法。大量的生产代码仍然这样运行，很多较早的教程、博客文章和 Stack Overflow 回答都是这种风格。它仍然有效，也仍然被支持。它只是 React 更早的写法。

较早写法是什么样的

这个手册不教这种风格，你也不需要写它。能识别它是很有用的，因为你会遇到。一个较早的代码库中的组件看起来大概是这样的：

jsx

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

  componentDidMount() {
    // React 只在组件首次出现在屏幕上时调用这个方法一次
  }

  render() {
    return <button>Clicked {this.state.count} times</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 在你自己的机器上运行。

历史和版本 ​

简要时间线 ​

野外的两种 React 写法 ​

历史和版本

简要时间线

野外的两种 React 写法