@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
- Yarn
- pnpm
npm install --save-dev @babel/plugin-transform-react-constant-elements
yarn add --dev @babel/plugin-transform-react-constant-elements
pnpm add --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経由
シェル
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"],
});