React の React.createElement では、なぜ React/jsx-runtime が必要なのでしょうか?

1. React.createElement の概要

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

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


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

2. React/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. React の React.createElement では、なぜ React/jsx-runtime が必要なのでしょうか?

React.createElement は仮想 DOM を構築するメソッドですが、要素の型、属性、サブ要素などを手動で指定する必要があり、使い方が面倒です。JSX 構文は、UI コンポーネントの構造とプロパティをより直観的に記述することができ、開発者の思考モデルとより一致しています。

React が登場する前は、JSX 構文を使用するには、Babel などのツールを使用して JSX を React.createElement の形式にコンパイルする必要があり、これは比較的面倒なプロセスでした。React v17 での jsx-runtime の導入により、開発者は Babel などのコンパイルツールに依存せずに JSX 構文を直接使用できるため、ビルドとデバッグの時間とコストが節約されます。

jsx-runtime を使用すると、JSX 構文は React.createElement の呼び出しに直接変換されるため、React.createElement を手動で記述するよりも、JSX 構文を使用する方が簡潔で読みやすくなります。同時に、jsx-runtime は、開発者が React アプリケーションをより便利に構築できるようにする、Fragment、jsxDEV などの追加の構文糖衣も提供します。

そこで、開発者が JSX 構文を使いやすくするために、react アプリケーションの開発プロセスを簡素化し、開発効率を向上させるために、react/jsx-runtime が誕生しました。

知らせ：

dom の作成に jsx メソッドを使用する必要がない場合は、手動で導入する必要はありません。

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

次のコードを実行できます。

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
    
)