React 学习

从 JSX/TSX 组件代码到浏览器实际渲染出 HTML 经历以下阶段：

1. JSX/TSX 转换（Babel/TypeScript）：

   • 首先，你的 JSX 或 TSX 代码会被一个转译器（如 Babel 或 TypeScript 编译器）处理。
   • 在这个阶段，JSX 语法（例如 <MyComponent />）会被转换为对 React.createElement 或专门的 JSX 运行时函数（如 _jsx 或 _jsxs）的调用。例如，packages/react/jsx-runtime.js 和 packages/react/jsx-dev-runtime.js 文件提供了这些 JSX 运行时函数，用于将 JSX 代码转换为 React 元素创建调用 (React Package: Component Definition and Core APIs)。
   • babel-plugin-react-compiler 是 React Compiler 的一部分，它在 Babel 转换过程中介入，将 React 组件和 Hooks 从 Babel AST 转换为优化形式，以减少不必要的重新渲染 (React Compiler and Optimization, React Compiler Architecture and Internal Workings)。

2. React 元素创建：

   • 转换后的 JavaScript 代码执行时，会调用 React.createElement 等函数，生成轻量级的 JavaScript 对象。这些对象被称为 "React 元素"，它们描述了组件树的结构和内容。它们不是真实的 DOM 节点，而是对 DOM 节点或组件实例的抽象描述 (React Package: Component Definition and Core APIs)。

3. 组件渲染和协调（Reconciliation）：

   • React 应用程序的核心 react 包提供了定义 UI 组件的基本 API (React Package: Component Definition and Core APIs)。
   • 当你调用 ReactDOM.render（旧版）或 ReactDOM.createRoot().render（新版）时，React 会开始渲染过程。
   • React 使用其协调算法（通过 react-reconciler 包实现）来比较新的 React 元素树与前一个（或初始的空）元素树。这个算法被称为 "Fiber"，它会找出最小的更新集，以高效地更新实际的 DOM (Core React Functionality)。
   • React Compiler 的目标之一就是通过优化组件和 Hooks 来最小化重新渲染，确保只有必要的部件在状态变化时重新渲染 (React Compiler and Optimization)。

4. DOM 更新（ReactDOM）：

   • react-dom 包负责将 React 组件集成到浏览器环境中，处理客户端渲染（CSR）和服务器端渲染（SSR）。它管理 React 树的初始渲染到 DOM，以及对服务器端渲染的 HTML 进行“水合”（hydration） (Core React Functionality)。
   • [createRoot](%2Ffacebook%2Freact%2Fpackages%2Freact-dom%2Fsrc%2Fclient%2FReactDOMClient.js#L210) 用于初始化一个新的 React 根节点，并管理 React 树的生命周期，包括在 DOM 容器中渲染和卸载组件。
   • [hydrateRoot](%2Ffacebook%2Freact%2Fpackages%2Freact-dom%2Fsrc%2Fclient%2FReactDOMClient.js#L236) 则用于服务器端预渲染的 HTML，将 React 附加到现有 DOM 结构上，同时保留其内容 (ReactDOM: Client-Side Rendering and Hydration)。

5. 服务器端渲染（SSR, 可选）：

   • 如果使用服务器端渲染，react-dom 提供了 renderToString 或 renderToPipeableStream 等函数，在服务器上将 React 组件渲染成 HTML 字符串或流。这些 HTML 会被发送到客户端，然后 hydrateRoot 在客户端接管，使其具有交互性 (ReactDOM: Server-Side Rendering (SSR) Capabilities)。
   • react-server 包提供了实验性的 API，用于实现自定义的 React 流式服务器渲染器，包括 Fizz 用于传统 SSR 和 Flight 用于 React Server Components (RSC) (React Server: Experimental Streaming and Server Components (Flight))。

简而言之，JSX/TSX 经过转译器转换为 React 元素（JavaScript 对象），React 利用协调算法高效地比较这些元素并计算出对实际 DOM 的最小更新，最终由 react-dom 将这些更新应用到浏览器 DOM，使其渲染为用户可见的 HTML。