⚡ 30 秒速记

• 按用途认识接口：描述、状态、同步、优化、宿主入口
• memo 与 PureComponent 的比较范围不同
• 引用用于命令式能力，不替代声明式状态
• 懒加载负责代码，挂起边界负责等待界面
• 删除与变更接口按项目主版本核对

学习 React 接口，先看它管哪条边界：界面描述、状态变化、外部同步还是性能优化。 比如记忆化只帮助减少部分重复工作，引用提供必要的命令式入口，懒加载和挂起边界则处理代码或资源等待。相似名称不代表相同契约，自定义比较的返回含义也要分清。旧生命周期、挂载入口和引用传递存在版本差异，写代码前对照项目使用的版本。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

组件类

组件类，详细分的话有三种类，第一类说白了就是我平时用于继承的基类组件Component,PureComponent,还有就是react提供的内置的组件，比如Fragment,StrictMode,另一部分就是高阶组件forwardRef,memo等。

Component

Component是class组件的根基。类组件一切始于Component。对于React.Component使用，我们没有什么好讲的。我们这里重点研究一下react对Component做了些什么。

react/src/ReactBaseClasses.js
function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

这就是Component函数，其中updater对象上保存着更新组件的方法。

我们声明的类组件是什么时候以何种形式被实例化的呢？

react-reconciler/src/ReactFiberClassComponent.js

constructClassInstance

function constructClassInstance(
    workInProgress,
    ctor,
    props
){
   const instance = new ctor(props, context);
    instance.updater = {
        isMounted,
        enqueueSetState(){
            /* setState 触发这里面的逻辑 */
        },
        enqueueReplaceState(){},
        enqueueForceUpdate(){
            /* forceUpdate 触发这里的逻辑 */
        }
    }
}