Con React.createElement en reaccionar, ¿por qué necesitamos reaccionar/jsx-runtime?

1. Introducción a React.createElement

React.createElement是React中用来创建虚拟DOM元素的方法。它接收三个参数：第一个参数是要创建的元素类型，可以是HTML标签名字符串或自定义组件；第二个参数是元素的属性，可以为null或一个对象；第三个及后面的参数是元素的子元素，可以是字符串、React元素或数组。

举个例子，如果要创建一个标签，可以使用以下代码：
React.createElement('button', { onClick: handleClick }, 'Click Me')


这个方法将返回一个React元素(虚拟DOM)，这个元素可以被渲染成真实的DOM元素

2. Introducción a reaccionar/jsx-runtime

react/jsx-runtime是React提供的一个JSX运行时库，用于实现JSX元素到React元素的转换。
在v17版本中，React官方提供了一个新的工具包react/jsx-runtime，它提供了JSX转换的运行时函数供开发者使用。使用react/jsx-runtime，如：

import { jsx } from 'react/jsx-runtime';

function MyComponent() {
  return jsx('div', null, jsx('h1', null, 'Hello World'));
}
可以看到，用jsx函数替代了原来的HTML标签语法，同时需要传入两个参数，第一个参数是元素类型，第二个参数是元素的属性。如果元素有子元素，可以在第二个参数后面添加任意数量的参数，这些参数将作为元素的子元素。这样，使用react/jsx-runtime提供的JSX运行时库，就可以在不再需要import React的情况下使用JSX语法了。

3. Con React.createElement en reaccionar, ¿por qué necesitamos reaccionar/jsx-runtime?

React.createElement es un método utilizado para construir un DOM virtual, que requiere especificar manualmente el tipo, atributos, subelementos, etc. del elemento, lo cual es engorroso de usar. La sintaxis JSX puede describir la estructura y las propiedades de los componentes de la interfaz de usuario de manera más intuitiva y está más en línea con el modelo de pensamiento del desarrollador.

Antes de React, usar la sintaxis JSX requería compilar JSX en el formato React.createElement a través de herramientas como Babel, lo cual era un proceso relativamente engorroso. La introducción de jsx-runtime en React v17 permite a los desarrolladores usar directamente la sintaxis JSX sin depender de herramientas de compilación como Babel, lo que ahorra tiempo y costo de compilación y depuración.

Después de usar jsx-runtime, la sintaxis JSX se convertirá directamente en una llamada a React.createElement. En comparación con escribir React.createElement manualmente, usar la sintaxis JSX es más conciso y más fácil de leer. Al mismo tiempo, jsx-runtime también proporciona algo de azúcar sintáctico adicional, como Fragment, jsxDEV, etc., que puede ayudar a los desarrolladores a crear aplicaciones React de manera más conveniente.

Por lo tanto, reaccionar/jsx-runtime nació para facilitar a los desarrolladores el uso de la sintaxis JSX, simplifica el proceso de desarrollo de aplicaciones React y mejora la eficiencia del desarrollo.

Aviso:

Si no necesita utilizar el método jsx para crear dom, no es necesario que lo introduzca manualmente.

import {
    
     jsx } from 'react/jsx-runtime';

Se puede ejecutar el siguiente código:

import ReactDOM from 'react-dom/client'
const Root = ReactDOM.createRoot(document.getElementById('root'))

let element = <h1 className='title' style={
    
    {
    
    color:'red'}}>hello</h1>

Root.render(
     element
    
)