理解 React 类组件：为何旧代码库不再让我害怕 🤫

Source: Dev.to

Overview

今天的学习并不是写新的 React 代码。
而是理解旧的 React 代码。

我已经了解 JavaScript 类。之前也学过它们，所以类组件在语法上并不是“新”东西。但当我开始阅读 React 类组件时，我意识到：

这不仅仅是 JavaScript 类。这是基于类构建的 React 旧的思维模型。

这正是需要时间去理解的地方。

刚开始看到类组件时，我并没有想，“这是什么新东西？”而是想，“好，这只是 React 中使用的 JS 类。”这确实没错。
但 React 在其之上添加了自己的概念：

• this.state
• this.setState
• 生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount

所以虽然语法看起来熟悉，React 的行为模型却不同。真正的挑战不是学习类本身，而是 React 如何使用它们。

Mapping Old Ideas to New Ones

当我开始把旧的概念映射到新的概念时，最清晰的认识出现了：

• useState ≈ this.state 和 this.setState
• useEffect ≈ 生命周期方法
• 清理函数 ≈ componentWillUnmount

于是恍然大悟：Hooks 并没有发明新概念；它们 简化并统一了旧的概念。理解了这一点，旧的 React 和新的 React 都变得更加清晰。

Why Understanding Old React Matters

在实际工作中：

• 你并不总是只做新项目。
• 你经常会加入已有的代码库，而这些代码库中仍有大量使用类组件。

如果你不理解它们，就无法自信地：

• 阅读代码
• 调试问题
• 安全地重构

Takeaways

• 理解旧的 React 是成为真正的 React 开发者的一部分，而不仅仅是教程式的学习。
• 这不是倒退，而是理解现代 React 基础的过程。
• 知道 React 在 hooks 之前是如何使用 JavaScript 类，使我能够：
  • 更有信心阅读旧代码
  • 在真实项目中更得心应手
  • 成为更成熟的 React 开发者

仍在学习。仍在进步。仍在构建。 💪