Glittering's blog

Appearance

短结论先给你：

  • 现在（React 16.8+）👉 几乎所有新项目：选 Hooks
  • Class 主要是“历史遗产 + 维护旧代码”

一、从官方和生态的现实说 ​

1️⃣ 官方态度已经很明确 ​

  • 新特性只围绕 Hooks 设计

    • useState / useEffect / useTransition / useSyncExternalStore
    • Server Components、Concurrent Features

  • Class 没有被废弃，但不会再增强

  • React 团队原话核心意思：
  • Class 是兼容层，Hooks 是未来

2️⃣ 生态现状 ​

  • 新库几乎只提供 Hooks API

    • React Query
    • Zustand / Jotai / Redux Toolkit
    • Framer Motion

  • 教程、示例、最佳实践：99% 是 Hooks

👉 用 Class 会让你脱离主流生态

二、从“写代码体验”和“可维护性”讲 ​

1️⃣ 同样的逻辑，对比一下 ​

Class ​

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

  componentDidMount() {
    document.title = this.state.count
  }

  componentDidUpdate() {
    document.title = this.state.count
  }

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    )
  }
}

Hooks ​

js
function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.title = count
  }, [count])

  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  )
}

👉 Hooks 的优势不只是“短”，而是：

  • 逻辑按“功能”聚合
  • 不再分散在 componentDidMount / Update / WillUnmount
  • 没有 this
  • 不需要手动绑定上下文

2️⃣ 逻辑复用：Hooks 完胜 ​

Class 的复用方式（历史） ​

  • HOC（嵌套地狱）
  • Render Props（JSX 套娃）

Hooks ​

js
function useTitle(title) {
  useEffect(() => {
    document.title = title
  }, [title])
}

自定义 Hook = 逻辑层面的“函数抽象”

这是 Class 永远做不到的事情。

三、从 React 内部原理看 ​

  • Fiber
  • renderWithHooks
  • Hooks Dispatcher
  • 为什么 hooks 不能写在条件里

👉 这正是关键点。

1️⃣ Hooks 和 Fiber 是“原生绑定”的 ​

  • 每个 Function Component 对应一个 Fiber

  • Hooks 存在 Fiber.memoizedState 的链表上

  • renderWithHooks 在渲染时：

    • 设置 Dispatcher（mount / update）
    • 顺序读取 hooks

👉 Hooks 是 React 新架构的“一等公民”

2️⃣ Class 本质上是“外层封装” ​

  • this.state、this.setState
  • 生命周期方法
  • 都是在 Fiber 上模拟出来的

可以理解为：

  • Class = 旧 API，跑在新内核之上
  • Hooks = 直接使用新内核

四、那 Class 还有没有“更好”的场景？ ​

有，但很少 👇

✅ 适合用 Class 的情况 ​

  1. 维护老项目
  2. 代码库已经是 Class 风格，没计划重构
  3. 需要 componentDidCatch（但现在 Hooks 也有替代方案）

❌ 不适合再用 Class 的情况 ​

  • 新项目
  • 新组件
  • 想学习 React 原理 / 并发特性
  • 想跟主流生态

五、一句工程师视角的结论 ​

  • Class 是“如何使用 React”
  • Hooks 是“如何思考 React”

如果你问的是：

  • 面试 👉 Hooks
  • 实际开发 👉 Hooks
  • 深入源码 / Fiber / Scheduler 👉 必须 Hooks
  • 接手老代码 👉 懂 Class 即可，不必新写

Copyright © 2026