实现JSX的转换( 三 ) _JSX

以下是两者之间的主要区别：

语法和转换方式：jsx函数用于处理新的JSX转换方式，其语法更简洁。createElement函数用于处理传统的JSX转换方式。

例如，一个JSX元素：
const element = <div className="container">Hello, world!</div>;使用createElement转换后的代码如下：
const element = React.createElement("div",{ className: "container" },"Hello, world!");使用jsx函数（自动运行时）转换后的代码如下：

import { jsx as _jsx } from "react/jsx-runtime";const element = _jsx("div", { className: "container", children: "Hello, world!" });

?子元素和key值处理：jsx函数将子元素作为属性（children）传递，而createElement函数将子元素作为额外的参数传递。同时子元素上的key值在jsx函数中也会以第三个参数的形式传递，而在createElement函数中，则是存在于config第二个参数中。

在createElement函数中：
React.createElement("div", {className: "App", key: "appKey"}, "hello,app");在jsx函数中：
import { jsx as _jsx } from "react/jsx-runtime";_jsx("div", {className: "app", children: "hello,app"}, "appKey");

?兼容性和版本：createElement函数在所有React版本中可用，而jsx函数仅在React 17及更高版本中提供。尽管React团队推荐使用新的JSX转换方式，但许多现有项目可能仍在使用createElement函数。

这时可能产生两个疑问：

从React 17之后使用Runtime Automatic自动运行时有什么好处？

简化组件代码：不再需要在每个组件文件顶部添加**import React from 'react';** 。这使得组件代码更简洁，更易于阅读和维护。
节省包大小：由于不再需要导入整个React对象，构建工具可以更好地优化输出代码，从而减小输出包的大小。

改成jsx函数后，为什么要把key属性单独拿出来放在第三个参数？

在之前的React版本中，每当创建一个新的React元素时，React都需要从属性对象中提取key?和ref，这会导致额外的性能开销。
将key?作为单独的参数传递，可以让React在处理虚拟DOM树时更容易地访问key，无需每次都从属性对象中查找。这有助于提高React的性能和效率，特别是在处理大量元素和复杂组件树时。
实现打包流程打包流程稍微有些复杂，后续写到文章里。
简单来说就是使用 Rollup，将编写jsx方法的文件打包出来，通过pnpm link --global的方式生成一个全局的react包，这样就可以通过pnpm link react --global调试自己创建的 create-react-app demo项目了。