首先，在浏览器中无法直接使用jsx，需要借助babel将jsx代码转化为javaScript。
新的转换有何不同？
当你使用 JSX 时，编译器会将其转换为浏览器可以理解的 React 函数调用。旧的 JSX 转换会把 JSX 转换为 React.createElement(...) 调用。
例如，假设源代码如下：
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
旧的 JSX 转换会将上述代码变成普通的 JavaScript 代码：
import React from 'react';
function App() {
return React.createElement('h1', null, 'Hello world');
}
此处就涉及到之前被面试问到的一个问题：为什么在每个jsx文件中我们都需要引入React，哪怕我们在代码中没有用到React？
就是因为我们在使用jsx时，需要转换，但是这个转换是调用了React.createElement这个方法。
为了解决使用jsx必须要在react的环境中使用，新的 JSX 转换不会将 JSX 转换为 React.createElement，而是自动从 React 的 package 中引入jsx函数并调用。
假设你的源代码如下：
function App() {
return <h1>Hello World</h1>;
}
下方是新 JSX 被转换编译后的结果：
// 由编译器引入（禁止自己引入！）
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
