跳至主内容

@babel/plugin-transform-react-constant-elements

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

该插件通过将 React 元素提升至最高作用域，减少不必要的重复实例化，从而加速协调过程并降低垃圾回收压力。

示例​

输入

JSX
const Hr = () => {
  return <hr className="hr" />;
};

const WithChildren = (props) => {
  return <div className={props.className}>
    <hr />
  </div>;
}

输出

JSX
var _hr, _hr2;

const Hr = () => {
  return _hr || (_hr = <hr className="hr" />);
};

const WithChildren = (props) => {
  return <div className={props.className}>
    {_hr2 || (_hr2 = <hr />)}
  </div>;
}

降级情况

  • 展开运算符

    JSX
    <div {...foobar} />

  • Refs

    JSX
    <div ref="foobar" />
    <div ref={node => this.node = node} />

  • 可变属性

提示

更多信息请参阅 https://github.com/facebook/react/issues/3226

JavaScript
<div style={{ width: 100 }} />

安装​

npm install --save-dev @babel/plugin-transform-react-constant-elements

用法​

通过配置文件（推荐）​

babel.config.json
{
  "plugins": ["@babel/plugin-transform-react-constant-elements"]
}

配置选项​

allowMutablePropsOnTags​

Array<string>，默认为 []

如果您使用的特定库（如 react-intl）使用了对象属性，且您确认元素不会修改自身 props，可以允许在特定元素上使用可变对象。

这将跳过 Mutable Properties 降级情况。

babel.config.json
{
  "plugins": [
    [
      "@babel/plugin-transform-react-constant-elements",
      { "allowMutablePropsOnTags": ["FormattedMessage"] }
    ]
  ]
}
提示

你可以在此处阅读更多关于配置插件选项的信息。

通过命令行​

Shell
babel --plugins @babel/plugin-transform-react-constant-elements script.js

通过 Node API​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-react-constant-elements"],
});

参考​