Aller au contenu principal

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

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Ce plugin peut accélérer la réconciliation et réduire la pression du garbage collection en remontant les éléments React au niveau de portée le plus élevé possible, évitant ainsi de multiples réinstanciations inutiles.

Exemple​

Entrée

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

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

Sortie

JSX
var _hr, _hr2;

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

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

Déoptimisations

  • Opérateur Spread

    JSX
    <div {...foobar} />

  • Réfs

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

  • Propriétés Mutables

astuce

Voir https://github.com/facebook/react/issues/3226 pour plus d'informations

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

Installation​

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

Utilisation​

Avec un fichier de configuration (Recommandé)​

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

Options​

allowMutablePropsOnTags​

Array<string>, valeur par défaut : []

Si vous utilisez une bibliothèque spécifique (comme react-intl) qui emploie des propriétés d'objet, et que vous êtes certain que l'élément ne modifiera pas ses propres props, vous pouvez autoriser les objets pour des éléments spécifiques.

Cela évitera la déoptimisation Mutable Properties.

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

Vous pouvez en savoir plus sur la configuration des options de plugin ici

Via CLI​

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

Via l'API Node​

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

Références​