实现JSX的转换 _JSX

当我们在项目中使用 React 构建界面时，主要使用的就是 React 包。它提供了开发者需要的所有API 。如React.Component、React.createElement、React.useState等等，所以它也是大多数 React 项目的基础。

文章插图

前言由于近期在看React框架源码、底层实现方面的知识，所以想把学习心得整理出来。

这也是一个新的系列「从0实现React 18核心模块」的第一篇。

接下来还会更新：render、commit阶段的实现，以及Hooks架构、useState、useEffect、单双节点Diff的过程还有React 18中的并发更新原理。
在看文章之前，我们可以先想几个问题：

JSX 是什么语法？
JSX 有什么优势，它的转换规则是什么或者它内部是如何实现的？
既然 React 一直在使用 JSX，那它的实现被写应该写在哪个包里（比如react、react-dom，react-reconciler）？
在React 17之前和React 17之后，JSX转换的方法实现有哪些异同？
如何实现React.createElement方法和运行时的 jsx 方法？
写一个Demo引入自己实现的jsx方法，看看运行结果

下文提到的 big-react 是从0到1实现的React的核心功能模块原理的项目如果自己实现一个 React 框架，它需要包含哪些内置的包：

react包是 React 的核心库，提供了创建和管理组件所需的基本功能（比如组件创建、组件生命周期管理、虚拟DOM以及Hooks等），主要是一些和宿主环境无关的方法。
react-reconciler包实现了 React 的 reconciliation 协调算法，是一种核心优化策略的实现，主要自定义协调器的实现。以及在不同的平台或环境中使用 React 。
shared包是big-react公用的辅助方法，和宿主环境无关。

如果还有一个必要的包，那就是react-dom：

react-dom：这个包提供了将 React 与 DOM（浏览器环境）集成的方法。它包含了用于将 React 组件渲染到 DOM 中的 ReactDOM.render() 函数，以及其他与浏览器环境相关的实用功能。对于在浏览器中运行的 React 应用程序，react-dom 是必需的。

react与react-reconciler包是什么react包为我们提供了什么当我们在项目中使用 React 构建界面时，主要使用的就是 react? 包。它提供了开发者需要的所有API 。如React.Component、React.createElement、React.useState等等，所以它也是大多数 React 项目的基础。
react-reconciler包实现了什么?react-reconciler包是一个更底层、更高级的库，它实现了reconciliation协调算法，reconciliation是 React 的一种核心优化策略，用于在更新组件时比较虚拟DOM树的差异，并将实际更改应用到实际的DOM树。这有助于提高性能，因为避免了不必要的DOM操作。
它主要用于创建自定义渲染器，以及在不同的平台中去使用 React 。例如，react-dom（用于Web平台）和react-native（用于移动应用）都使用react-reconciler作为底层库，实现了针对各自平台的渲染逻辑。
JSX 是什么const element = <div className="container">Hello, world!</div>;在React中，JSX是一种JAVAScript语法扩展，允许你在JavaScript代码中编写类似html的标记。要使用JSX，需要在构建过程中将其转换为标准的JavaScript代码。
通常，这个转换过程包括两个主要部分：

编译时：通常指将 JSX 语法转换为浏览器可以理解的普通 JavaScript 代码的过程，这个过程通常由 Babel 完成。
构建时：在将JSX语法转换为标准的JavaScript代码后，通常会使用构建和打包工具（如Webpack、Rollup）对代码进行优化、压缩和打包。打包工具将源代码和依赖项组合成一个或多个文件（“bundles”或“chunks”），用于在浏览器中运行。
运行时：React会根据编译后的代码创建虚拟DOM树，然后将其渲染到实际的DOM中。还会发生的阶段有状态管理和更新、事件处理和Diff算法的比较等。

JSX 被 Babel 编译成了什么在React 17之前，JSX语法会被编译成React.createElement函数的调用，用来创建虚拟DOM元素。