一、React.createElement介绍
React.createElement是React中用来创建虚拟DOM元素的方法。它接收三个参数:第一个参数是要创建的元素类型,可以是HTML标签名字符串或自定义组件;第二个参数是元素的属性,可以为null或一个对象;第三个及后面的参数是元素的子元素,可以是字符串、React元素或数组。
举个例子,如果要创建一个标签,可以使用以下代码:
React.createElement('button', { onClick: handleClick }, 'Click Me')
这个方法将返回一个React元素(虚拟DOM),这个元素可以被渲染成真实的DOM元素
二、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语法了。
三、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还提供了一些额外的语法糖,如Fragment、jsxDEV等,可以帮助开发者更方便地构建React应用。
因此,react/jsx-runtime是为了方便开发者使用JSX语法而诞生的,它简化了React应用的开发流程,提高了开发效率。
注意:
如果不需要使用jsx方法创建dom的话,不用手动引入
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
)