在 React 中，JSX 是一种高效且易于编写的语法，其与 JavaScript 完全兼容。然而，浏览器并不能直接理解 JSX，所以需要将其转换为纯 JavaScript。在这一过程中，我们可以使用 @babel/plugin-transform-react-jsx-self 这个 NPM 包来使 JSX 转换更加方便和高效。
描述
@babel/plugin-transform-react-jsx-self 是一个 Babel 插件，用于将 JSX 转换为 JavaScript。它具有性能优势，因为它会重用 React.createElement() 调用。此插件旨在与 @babel/preset-react 或 @babel/plugin-transform-react-jsx 一起使用，它仅仅将自闭合元素和不需要参数的createElement 转化为 React.createElement() 函数调用。
安装
在使用此插件之前，您需要先安装 Babel 的核心模块 @babel/core，以及与 JSX 一起使用的插件 @babel/preset-react。
在终端中以 Node.js 的方式运行：
--- ------- ---------- ----------- ------------------- --------------------------------------
上述命令将安装 Babel 核心模块、用于 JSX 的 preset-react 插件以及使用 JSX 的变换插件 plugin-transform-react-jsx-self，来使用这个插件我们需要在 Babel 的配置文件 .babelrc 中添加插件配置：
- ---------- ------------------------ ---------- ------------------------------------------ -
这样，在使用 Babel 进行转换时，就会自动加载 @babel/plugin-transform-react-jsx-self 插件进行转换了。
使用
在使用 @babel/plugin-transform-react-jsx-self 插件时，你需要使用 JSX 语法编写你的 React 组件，并将其传递给 Babel 进行转换。
------ ----- ---- -------- -------- ---------- - ------ ------- ----------- -- ------------------------ ----------- -
当你使用 Babel 进行转换时，@babel/plugin-transform-react-jsx-self 插件会将上述 JSX 代码转换为以下代码：
------ ----- ---- --------
-------- ---------- -
------ ----------------------------- -
-------- -- -- -----------------
-- ------ -----
-@babel/plugin-transform-react-jsx-self 插件会将自闭合的 JSX 元素以及不需要参数的 React.createElement() 转换为 React.createElement() 的函数调用。这种优化的转换方式能够在保证性能的情况下大幅降低代码的大小。
示例
下面是一个使用了 @babel/plugin-transform-react-jsx-self 的 React 组件的示例：
------ ----- ---- --------
-------- ------------------ -
------ -
---- -------------------------
----------------------
--------- --
------
--
-
-------- ---------- -
------ ------- ----------- -- ------------------------ -----------
-
------ ------- ------------在进行转换时，@babel/plugin-transform-react-jsx-self 会将自闭合的 JSX 元素和不需要参数的 React.createElement 替换为函数调用，得到的代码如下：
------ ----- ---- --------
-------- ------------------ -
------ -------------------------- -
---------- --------------
-- ------------------------- ----- ------------- ----------------------------- -------
-
-------- ---------- -
------ ----------------------------- -
-------- -- -- -----------------
-- ------ -----
-
------ ------- ------------总结
@babel/plugin-transform-react-jsx-self 是一个 Babel 插件，用于在将 JSX 代码转换为 JavaScript 代码时重用 React.createElement() 函数调用，以提高代码转换的效率和性能。我们需要在 Babel 的配置文件 .babelrc 中添加插件配置，然后就可以开始使用 @babel/plugin-transform-react-jsx-self 插件进行自闭合元素和不需要参数的 createElement 转换了。相比于其他的 JSX 转换插件，它的体积更小且转换速度更快，是 React 开发中的重要工具之一。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/101294