跳至主要内容

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

此插件可以通过将 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} />

  • 引用

    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），并且您确定该元素不会修改其自身的属性，则可以允许特定元素使用对象。

这将跳过 可变属性 去优化。

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

您可以在 此处 阅读有关配置插件选项的更多信息

通过 CLI​

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"],
});

参考​