4.函数组件和类组件的本质区别究竟是什么？副本

用户9452

4月21日修改

在 React 开发中，我们总会遇到一个基础却核心的选择题：使用函数组件（Function Component）还是类组件（Class Component）？​

随着 Hooks 的普及，许多开发者会直观地认为：“函数组件现在也能管理 state 和处理副作用了，所以它和类组件差不多，而且写起来更简单。” 这个结论没错，但它只触及了表面。函数组件和类组件的根本差异，并非仅仅是语法上的简洁或复杂，而是植根于两种截然不同的设计哲学和心智模型。​

理解这一层差异，能帮助我们写出更健壮、更可预测的 React 代码。​

核心差异：心智模型与数据流

我们可以从两种组件分别代表的编程范式来理解它们的根本不同。​

•
类组件：面向对象的“实例”思维​

类组件是面向对象编程（OOP）思想在 React 中的体现。当我们定义一个类组件时，我们实际上是在创建一个蓝图。在渲染时，React 会根据这个蓝图 new 一个组件实例。​
​
这个**实例**是“活”的，它有自己的生命周期（componentDidMount, componentDidUpdate 等），并持有自己的内部状态（this.state）和方法（this.myMethod）。render 函数只是这个实例众多方法中的一个。无论何时，当我们想在组件内部访问 props 或 state 时，我们总是通过 this 这个不稳定的指针来读取**当前**的值。​
​
心智模型：我们操作的是一个长期存在的、状态可变的实例。​
​

•
函数组件：函数式编程的“快照”思维​

函数组件更贴近函数式编程（FP）的理念。它本质上就是一个普通的 JavaScript 函数，接收 props 作为参数，返回一段描述 UI 的 JSX。​
​
它本身是无状态的。每次父组件更新，函数组件都会被**重新调用**，形成一次新的渲染。每一次渲染，都是一个独立的“快照”，函数内部的所有变量（包括通过 Hooks 获取的 state）都被固定在了那一刻。​
​
那状态如何跨渲染周期持久化呢？答案是 Hooks。useState、useEffect 等 Hooks 让我们能够“钩入”到 React 自身的 state 管理机制中。React 帮助我们保管了 state，并在下一次渲染时，将最新的 state 值传递给重新执行的函数。​
​
心智模型：我们操作的是一次性的渲染函数，它捕获了特定时刻的 props 和 state。​
​

一个经典场景：Props 与 State 的“捕获”

“实例”和“快照”这两种心智模型最大的区别，体现在对异步操作的处理上。我们来看一个经典的计数器例子。​

假设有一个组件，它显示当前的计数值，并有一个按钮。点击按钮后，会在 3 秒后打印出当时的计数值。​

类组件的实现

代码块

import React from 'react';​
​
class ProfilePage extends React.Component {​
  state = {​
    count: 0,​
  };​
​
  logMessage = () => {​
    setTimeout(() => {​
      // 读取的是 3 秒后 this.state.count 的最新值​
      alert(`Count is: ${this.state.count}`);​
    }, 3000);​
  };​
​
  handleClick = () => {​
    this.setState({ count: this.state.count + 1 });​
    this.logMessage();​
  };​
​
  render() {​
    return (​
      <div>​
        <p>You clicked {this.state.count} times</p>​
        <button onClick={this.handleClick}>Click me</button>​
      </div>​
    );​
  }​
}​

4.函数组件和类组件的本质区别究竟是什么？ 副本​

4.函数组件和类组件的本质区别究竟是什么？副本