类组件 & 函数组件

类组件和函数组件的区别？

类组件：“实例”思维

类组件是面向对象（OOP）的体现。

创建实例：React 会 new 一个组件实例
可变状态：这个实例有自己的生命周期、内部状态和方法。
不稳定的 this：总是需要通过 this 这个可变的指针，来读取 state、props。

心智模型：我们在操作一个长期存在、状态可变的“实例”。

生命周期

类组件关注“时间点”，以生命周期方法为中心，可将逻辑分散到：

componentDidMount（挂载时）
componentDidUpdate（更新时）
componentWillUnmount（卸载时）

这种方式更关注的是“时间点”，这常常导致相关逻辑被拆分到不同的方法中，不易于维护。

类组件在执行 `ReactDOM.render(<MyComponent />, document.getElementById("app"))` 发生了什么？

js

class MyComponent extends Component {
  render() {
    return <h1>hello</h1>
  }
}

React 解析组件标签，找到 MyComponent 组件。
发现组件是类定义的，随后 new 出该类示例。并通过该实例调用原型上的 render 方法。
将 render 返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。

render 是放在哪里的？—— MyComponent 的原型对象上，供示例使用。
render 中的 this 是谁？—— MyComponent 的实例对象 | MyComponent 组件实例对象。

函数组件：“快照”思维

函数组件贴近函数式编程（FP）的理念。

重新调用：每次渲染，函数都会被完整地重新执行。
捕获值：每一次渲染都是一个独立的“快照”，函数内部所有的值（state、props）都被固定在了那一刻。
hooks 依赖：通过 useState、useEffect 等 hooks 来管理状态和副作用。

心智模型：我们操作的是一次性的渲染函数，它捕获了特定时刻的值。

副作用 useEffect

以 useEffect 为中心，将相关的逻辑组织在一起。

useEffect 的思维模式是：当某些数据（state、props）发生变化时，需要同步执行某些操作。

这种方式它的关注点是“数据”，而不是“时间点”，代码内聚性更强，更易于维护。

拥抱函数组件的理由

React 官方主推的方式，函数组件是未来式。
代码更简洁：省去了 constructor、this 等冗余代码。
逻辑复用更优雅：可自定义 hooks，轻松抽离带状态的逻辑。
心智负担更小：避免 this 指针的困扰，减少类和继承的复杂性。
行为更可预测：闭包带来的 值捕获特性 让异步操作和副作用处理更符合直觉，减少 bug。

函数组件在执行 `ReactDOM.render(<MyComponent />, document.getElementById("app"))` 发生了什么？

js

function MyComponent() {
  return <h1>hello</h1>
}

React 解析组件标签，找到 MyComponent 组件。
发现组件是函数定义的，随后调用该函数。
将返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。

函数中 this 是谁？—— 开启严格模式，故而不是 window 而是 undefined。