Saltar al contenido principal

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

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Este plugin puede acelerar la reconciliación y reducir la presión del recolector de basura al elevar los elementos de React al ámbito más alto posible, evitando múltiples reinstanciaciones innecesarias.

Ejemplo​

Entrada

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

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

Salida

JSX
var _hr, _hr2;

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

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

Desoptimizaciones

  • Operador de propagación (Spread)

    JSX
    <div {...foobar} />

  • Referencias (Refs)

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

  • Propiedades mutables

consejo

Consulta https://github.com/facebook/react/issues/3226 para más información

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

Instalación​

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

Uso​

Mediante un archivo de configuración (Recomendado)​

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

Opciones​

allowMutablePropsOnTags​

Array<string>, valor predeterminado: []

Si estás usando una biblioteca específica (como react-intl) que utiliza propiedades de objeto, y estás seguro de que el elemento no modificará sus propias props, puedes permitir objetos para elementos específicos.

Esto omitirá la desoptimización de Mutable Properties.

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

Puedes leer más sobre cómo configurar opciones de plugins aquí

Mediante la CLI​

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

Mediante la API de Node​

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

Referencias​