面试官：React 怎么将JSX 转换为真实 DOM 的？

当 React 将 JSX 转换为真实 DOM 时，它主要依赖于以下几个方法和机制：

1. React.createElement()： JSX 元素会被 Babel 转译为对应的 React.createElement() 调用。这个函数创建了一个描述 DOM 结构的 JavaScript 对象，包含了元素的类型、属性和子元素等信息。例如：

   const element = <h1>Hello, world!</h1>;

   这个 JSX 会被转换为以下形式：

   const element = React.createElement('h1', null, 'Hello, world!');

2. 虚拟 DOM： React 使用虚拟 DOM 进行 DOM 操作的抽象。在更新组件时，React 会创建一个虚拟 DOM 树，它是由 React 元素（通过 React.createElement() 创建）组成的 JavaScript 对象树。React 会使用这棵虚拟 DOM 树来进行高效的 DOM 操作。
3. diff 算法： 当状态发生变化，需要更新 UI 时，React 会使用 diff 算法比较新的虚拟 DOM 和旧的虚拟 DOM 的差异。这个算法会尽量找出最小的变更，以减少对真实 DOM 的操作次数。

4. ReactDOM.render()： ReactDOM.render() 是 React 用来将虚拟 DOM 渲染到真实 DOM 的方法。它接受两个参数：要渲染的 React 元素和要渲染到的 DOM 节点。例如：

   const element = <h1>Hello, world!</h1>;
   ReactDOM.render(element, document.getElementById('root'));

   这样，React 就会将 element 渲染到 id 为 "root" 的 DOM 节点中。

5. React 生命周期方法： 在组件挂载、更新和卸载等阶段，React 提供了一系列生命周期方法供开发者处理相应的逻辑。这些生命周期方法也会被用来触发虚拟 DOM 的更新和与真实 DOM 的同步。

这些方法和机制共同作用，使得 React 能够高效地将 JSX 转换为真实 DOM，并实现组件的动态更新。