Vai al contenuto principale

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

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Questo plugin può velocizzare la riconciliazione e ridurre la pressione della garbage collection elevando gli elementi React allo scope più esterno possibile, prevenendo così reinstanziazioni multiple non necessarie.

Esempio​

In

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

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

Out

JSX
var _hr, _hr2;

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

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

Deottimizzazioni

  • Operatore Spread

    JSX
    <div {...foobar} />

  • Refs

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

  • Proprietà Mutabili

consiglio

Consulta https://github.com/facebook/react/issues/3226 per maggiori informazioni

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

Installazione​

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

Utilizzo​

Con un file di configurazione (Consigliato)​

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

Opzioni​

allowMutablePropsOnTags​

Array<string>, valore predefinito []

Se stai utilizzando una libreria specifica (come react-intl) che impiega proprietà di tipo oggetto, e sei certo che l'elemento non modificherà le proprie props, puoi consentire oggetti per elementi specifici.

Ciò permetterà di saltare la deottimizzazione Mutable Properties.

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

Maggiori informazioni sulla configurazione delle opzioni del plugin sono disponibili qui

Tramite CLI​

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

Tramite Node API​

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

Riferimenti​