React18 基础入门API、JSX语法糖
warning:
这篇文章距离上次修改已过187天，其中的内容可能已经有所变动。
React 18 引入了一些新的基础API和改进，其中最显著的是新的JSX转换，它使用 react/jsx-runtime 和 react/jsx-dev-runtime ，这使得JSX转换在开发和生产模式下更加高效。
以下是一个简单的React组件示例，展示了如何在React 18中使用新的JSX转换：
// 引入jsx转换
import { jsx as jsxTransform } from 'react/jsx-runtime';
// 自定义组件
function HelloWorld() {
return <h1>Hello, world!</h1>;
}
// 使用jsxTransform标识来编译JSX
const element = jsxTransform(HelloWorld, {});
// 渲染到DOM
ReactDOM.createRoot(document.getElementById('root')).render(element);注意：在实际的React 18项目中，你不需要显式地引入 jsxTransform，因为项目配置（通常是 babel 配置）会自动处理JSX。上面的代码是为了演示如何直接使用JSX转换。
评论已关闭