跳至主要內容

@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>;
}

Deopts

  • 散佈運算子

    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)，並且您確定元素不會修改其自己的 props，則可以允許特定元素使用物件。

這將略過 Mutable Properties deopt。

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

參考​