React.Component — 类组件及其工作原理

什么是 React.Component？

React.Component — 一个抽象类，提供用于处理状态、props 和组件生命周期的内置方法。要创建类组件，您需要定义一个继承自 React.Component 的类，并实现 render 方法。

React.Component 出现在 React 的第一个版本（2013 年）中，并在五年内一直是创建组件的主要方式。React 生态系统围绕类构建：高阶组件（HOC）、render props、上下文 — 所有这些模式都是通过类语法实现的。

随着 2019 年 React 16.8 的发布，React 团队引入了 hooks 作为类的替代方案。hooks 解决了相同的任务 — 状态、副作用、上下文 — 但没有继承和复杂的上下文绑定。React.Component 仍然完全受支持，但对于新项目，推荐使用函数式方法。

创建类组件

最简类组件 — 只有一个 render 方法并返回 React 元素的类。render — 唯一必需的方法。它必须是 this.props 和 this.state 的纯函数：相同的 props 和状态集产生相同的结果。

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

构造函数和状态初始化

构造函数在挂载之前执行。在其中调用 super(props) 以将 props 传递给父类，并初始化 this.state。不建议将构造函数用于其他目的 — 订阅、API 调用：为此有 componentDidMount。

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

通过 this.state 和 this.setState 管理状态

this.state — 包含组件数据的对象。直接修改它（this.state.count = 1）是不允许的 — 不会触发重新渲染并破坏可预测性。必须通过 this.setState 更新状态，它会创建一个新的状态对象并触发重新渲染。

setState 可以接受对象或函数。当新状态依赖于先前状态时，函数形式更可取：this.setState(prev => ({ count: prev.count + 1 }))。React 可以将多个 setState 调用分组到一个批次中以优化性能。

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

setState 的一个重要特性 — 它是异步的。调用 setState 后，状态不会立即更新。如果需要在更新后执行操作，请将回调作为第二个参数传递：this.setState(newState, () => console.log(this.state))。

生命周期方法

类组件具有预定义的方法，React 在特定时刻调用这些方法。挂载 — constructor → render → componentDidMount。更新 — render → componentDidUpdate。卸载 — componentWillUnmount。

ComponentDidMount — 数据请求

componentDidMount — 首次渲染后副作用的主要位置。在这里执行 HTTP 请求、建立 WebSocket 连接和启动定时器。如果您不在 componentWillUnmount 中清理订阅，将发生内存泄漏。

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // 卸载时取消请求
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

方法中 this 上下文的绑定

在 JavaScript 中，类方法默认不绑定到实例。如果您将方法作为回调传递 — 给事件处理程序、定时器 — this 将是 undefined（严格模式）或 window（非严格模式）。没有绑定，this.setState 会抛出错误。

有三种绑定方式：在构造函数中使用 bind、在回调中使用箭头函数和带有箭头函数的 class field。第一种方式是 React 的官方推荐：在构造函数中 bind 一次，无需在每次渲染时重新创建函数。

// 方法 1：在构造函数中使用 bind（推荐）
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class field — 具有自动绑定的现代语法。类属性中的箭头函数从构造函数的作用域中捕获 this。缺点 — 方法在每个实例上创建，而不是在原型上，这会增加同类数百个组件的内存消耗。

类组件与函数式组件的比较

在类和函数之间的选择 — 不仅仅是语法问题。带有 hooks 的函数式组件解决了类固有的问题：在不同生命周期方法中（componentDidMount + componentDidUpdate）逻辑重复、this 的复杂性以及无法将相关逻辑提取到可重用块中。

函数式组件更易于测试 — 它们没有内部状态（hooks 之前只在类中有）并且不需要挂载到 DOM 来检查回调。React 建议所有新项目使用函数式组件，文档和示例都是用它们编写的。

类组件在处理遗留代码时仍然是最佳选择。如果项目在 2019 年之前启动，它可能包含成千上万个类组件。在一个 sprint 中将它们全部重写为 hooks 是有风险的。React 保证向后兼容性：类组件不会被移除。

从类到 hooks 的迁移策略

逐步迁移从分析组件开始。无状态的简单组件（stateless）首先被转换 — 它们很容易被函数替代。然后 — 具有一到两个状态字段的组件，其中 useState 直接替换 this.state 和 this.setState。

具有多个生命周期方法的复杂组件通过 useEffect 进行转换。来自 componentDidMount + componentDidUpdate 的逻辑被拆分为具有不同依赖关系的单独 useEffect。componentWillUnmount 被 useEffect 内部的返回函数替代。对于复杂的状态逻辑，请使用 useReducer。

自动迁移工具 — @phenomnomnominal/ts-react-class-to-hook 或 codemod 脚本 — 可以自动转换简单的类。对于复杂情况，迁移仍然是需要理解原始组件逻辑的手动工作。