跳到主要内容

react dom

该包作为 DOM 和服务器渲染器的 React 入口。它旨在与通用 React 包搭配使用。

一、出口​

在 "package.json" 文件中导出了文件的主要 API 导出入口：

{
  "exports": {
    ".": {
      "react-server": "./react-dom.react-server.js",
      "default": "./index.js" // 默认出口
    },
    "./client": {
      "react-server": "./client.react-server.js",
      "default": "./client.js"
    },
    "./server": {
      "react-server": "./server.react-server.js",
      "workerd": "./server.edge.js",
      "bun": "./server.bun.js",
      "deno": "./server.node.js",
      "worker": "./server.browser.js",
      "node": "./server.node.js",
      "edge-light": "./server.edge.js",
      "browser": "./server.browser.js",
      "default": "./server.node.js"
    },
    "./server.browser": {
      "react-server": "./server.react-server.js",
      "default": "./server.browser.js"
    },
    "./server.bun": {
      "react-server": "./server.react-server.js",
      "default": "./server.bun.js"
    },
    "./server.edge": {
      "react-server": "./server.react-server.js",
      "default": "./server.edge.js"
    },
    "./server.node": {
      "react-server": "./server.react-server.js",
      "default": "./server.node.js"
    },
    "./static": {
      "react-server": "./static.react-server.js",
      "workerd": "./static.edge.js",
      "deno": "./static.browser.js",
      "worker": "./static.browser.js",
      "node": "./static.node.js",
      "edge-light": "./static.edge.js",
      "browser": "./static.browser.js",
      "default": "./static.node.js"
    },
    "./static.browser": {
      "react-server": "./static.react-server.js",
      "default": "./static.browser.js"
    },
    "./static.edge": {
      "react-server": "./static.react-server.js",
      "default": "./static.edge.js"
    },
    "./static.node": {
      "react-server": "./static.react-server.js",
      "default": "./static.node.js"
    },
    "./profiling": {
      "react-server": "./profiling.react-server.js",
      "default": "./profiling.js"
    },
    "./test-utils": "./test-utils.js",
    "./unstable_testing": {
      "react-server": "./unstable_testing.react-server.js",
      "default": "./unstable_testing.js"
    },
    "./unstable_server-external-runtime": "./unstable_server-external-runtime.js",
    "./src/*": "./src/*",
    "./package.json": "./package.json"
  }
}

二、与 react 包的关系​

1. 流程图​

2. 对比表格​

包名角色是否暴露给开发者
react核心运行时
（定义组件/虚拟 DOM /协调算法/ HOOKS ）		✅
react-dom渲染器入口
（挂载/更新/卸载组件到 DOM 的接口）		✅
react-dom-bindingsDOM 操作的具体实现
（事件委托/样式处理/ DOM 属性同步等细节）		❌ 内部私有

3. 协作流程​

  • react-dom
    • 接收组件树 → 调用 react的协调算法生成 Fiber 树
    • 通过 react-dom-bindings 执行具体 DOM 操作
  • react-dom-bindings
    • 执行 DOM 增删改查（如 appendChild, setAttribute）
    • 处理跨浏览器兼容性问题（如事件系统）
    • 管理表单元素的受控/非受控状态
  • react