读《How Does setState Know What to Do?》

Table of contents

react 和 react-dom 的区别

• react 包：专注于平台无关的 API 和核心特性，只负责组件定义、状态等抽象层，与“渲染”没有直接关系。
• react-dom 包（渲染器）：负责将 React 组件挂载到 DOM，并实现与平台相关的 API，比如 ReactDOM.render。类似的渲染器还有 react-native、react-test-renderer、react-dom/server 等。
• 版本同步：通常 react 和渲染器包需要配套更新。但新特性发布时，渲染器的实现可能会有延迟，实际功能落地以各个渲染器实际适配为准。

类组件时代与函数组件时代：setState 和 Hooks 如何与渲染器协作？

类组件：

• 组件实例在创建时，会挂载一个 updater 属性，该属性由具体的渲染器实现（如 ReactDOMUpdater）。
• setState 方法实际只是代理，把状态更新请求转发给 updater：

  setState(partialState, callback) {
    this.updater.enqueueSetState(this, partialState, callback);
  }

• 这样，setState 并不直接处理状态变更和更新，真正的逻辑由平台渲染器决定。

函数组件：

• 原理类似，但实现方式不同：React 在渲染前通过“dispatcher”机制将 Hooks 能力注入。
• Hooks（如 useState）的调用被委托给当前渲染器对应的 dispatcher 实现：

  const React = {
    __currentDispatcher: null,
   
    useState(initialState) {
      return React.__currentDispatcher.useState(initialState);
    },
  };
  
  React.__currentDispatcher = ReactDOMDispatcher;
  let result = YourComponent(props);

• 这样一来，Hooks 的状态和副作用管理实际也都是由渲染器控制。

总结

React 通过依赖注入的方式将与渲染相关的具体实现（如 DOM 操作、状态管理等）委托给各自的渲染器（如 react-dom、react-native）。核心 react 包专注于平台无关的抽象，各个平台间通过渲染器完成差异化落地，实现了“抽象-实现分离”的设计目标。