JSX Classic vs JSX Automatic

por

Para el código JSX:

const List = ({elements}) => {
	return <ul>
      {elements.map(element => <Element text={element}/>)}
    </ul>;
}
const Element = ({text}) => {
	return {text.id}: {text.name};
}

Obtenemos dos posibles transformaciones de JSX, la «Classic», que es la que usaba React antes de la versión 17, y la «Automatic» que es desde la v17 en adelante.

JSX Classic:

const List = ({ elements }) => {
  return React.createElement("ul", null, elements.map(element => React.createElement(Element, {
    text: element
  })));
};
const Element = ({ text }) => {
  return React.createElement("li", null, text.id, ": ", text.name);
};

JSX Automatic:

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

const List = ({ elements }) => {
  return _jsx("ul", {
    children: elements.map(element => _jsx(Element, {
      text: element
    }))
  });
};

const Element = ({ text }) => {
  return _jsxs("li", {
    children: [text.id, ": ", text.name]
  });
};

La principal diferencia es que React.createElement es una función muy versatil. A partir del parametro #2 en adelante son todos los hijos de un elemento. Pudiendo ser ninguno o muchos.

En la nueva version, con el proposito de optimizar el renderizado, si la etiqueta tiene 0 o 1 hijo se transpila a _jsx, si tiene 2 o mas se transpila a _jsxs

Esto hace tambien que no tengamos que importar React en las versiones modernas, ya que ya se incluye en la transpilación «react/jsx-runtime» automaticamente.

Deja un comentario