理解旧 React 代码：构建 “Classy Weather” 给我的启示

Source: Dev.to

在过去的几天里，我一直在做一个叫 Classy Weather 的小项目。目标并不是学习新东西或现代技术。目标很简单，却让人不舒服：理解一个使用类组件编写的旧 React 代码库。

直到现在，我只用过函数组件和 Hook。我懂 JavaScript 类，所以我以为类组件会很自然。但当我真正开始阅读和编写这些代码时，我意识到一件重要的事：了解 JavaScript 类和理解 React 类组件是两回事。

这个项目迫使我放慢脚步，仔细阅读代码，了解在 Hook 出现之前 React 是如何工作的。

为什么决定回到类组件

在真实的工作中，你并不总是能接触到全新的、现代的代码库。很多公司仍然拥有 使用类组件编写的大型 React 应用。如果你不能阅读或维护这些代码，你的开发者价值就会受限。

于是我构建了 Classy Weather，一个仅使用类组件的天气小应用：

• 从 API 获取数据
• 将最近搜索的地点保存在 localStorage 中
• 显示加载状态
• 当状态变化时更新 UI

起初，代码感觉很奇怪。没有 useState 和 useEffect，一切都发生在：

• state = { ... }
• componentDidMount
• componentDidUpdate
• componentWillUnmount

我意识到 今天 Hook 为我们做的事，过去是通过生命周期方法手动完成的。

让我困惑的地方（以及最终恍然大悟的点）

最大的困惑是 在脑中把 Hook 映射到生命周期方法：

• useEffect(..., []) → componentDidMount
• 带依赖项的 useEffect → componentDidUpdate
• 清理函数 → componentWillUnmount

另一个难点是理解在类组件中，状态默认不是函数式更新的。必须仔细思考 React 何时以及如何重新渲染。

当我跟踪这个应用的数据流时：

1. 用户输入地点 → state.location 更新
2. componentDidUpdate 检测到变化 → 再次获取天气数据
3. UI 重新渲染

…一切都开始有了意义。

我也诚实地意识到：

我并不是因为类组件不好而感到困惑，而是因为我从未认真阅读过旧的 React 代码。

真正的教训：为什么这让我成为更好的开发者

这个项目并没有让我“更擅长类组件”。它让我 更擅长阅读他人编写的代码。

现在，当我看到一个旧的 React 代码库时，我不再惊慌。我可以理解：

• 副作用位于何处
• 状态变化发生在哪里
• 组件生命周期是如何流动的
• UI 是如何从状态派生的

这才是真正的技能。

框架会变，语法会变。但 理解已有代码库的能力才是让你在开发者职业中有价值的关键。

Classy Weather 并不是为了构建一个天气应用，而是 学习如何在别人的代码中思考。这是一项我知道在真实世界中必不可少的技能。