【React】jsx 从声明式语法变成命令式语法

在 React 中，JSX 是一种声明式的语法扩展，它使得开发者能够以类似 HTML 的方式描述用户界面。

然而，在某些情况下，可能希望将 JSX 转换为命令式语法，以获得更精细的控制或满足特定的需求。(ckeditor.com)

---

JSX 到命令式语法的转换

JSX 语法在编译时会被转换为 React.createElement 或其他相关函数的调用。这个过程通常由 Babel 等工具自动完成。例如，以下 JSX 代码：(legacy.reactjs.org, Reddit)

const element = <h1>Hello, world!</h1>;

在编译后会被转换为：

const element = React.createElement('h1', null, 'Hello, world!');

在 React 17 引入的新 JSX 转换中，编译器会自动引入 jsx 函数，而不再需要显式导入 React：(legacy.reactjs.org)

import { jsx as _jsx } from 'react/jsx-runtime';const element = _jsx('h1', { children: 'Hello, world!' });

这种转换方式使得 JSX 更加灵活，并减少了对 React 的直接依赖。

---

示例：从 JSX 到命令式语法

以下是一个将 JSX 转换为命令式语法的示例：

使用 JSX：

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

转换为命令式语法：

function Welcome(props) {return React.createElement('h1', null, `Hello, ${props.name}`);
}

---