最近，开始在看 react 源码，也逐渐关注起来 react 新版本的更新。 访问 react 的 blog 时候，发现了一篇「Introducing the New JSX Transform」.
_Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. _
翻译过来就是 尽管 React 17 不包含新功能，但它将为新版本的JSX转换提供支持。
接下来，我就和大家一起来阅读一下这篇文章吧~
现状
写过 react 的大概都知道我们在代码中写的 react 语法:
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
会被 babel 转为:
import React from 'react';
function App() {
return React.createElement('h1', null, 'Hello world');
}
但是正如文中所述的，这并不完美：
- _因为将 JSX 编译为 React.createElement，React 如果您使用 JSX，则必须在范围内。 _
- 有一些性能改进和简化是 React.createElement 不允许。
新版本更新了什么
不需要写冗余的导入 React 了
为了解决这些问题，React 17 在 React 包中引入了两个新的入口点，仅供 Babel 和 TypeScript 等编译器使用。新的 JSX 转换没有将 JSX 转换为 React.createElement，而是自动从 React 包中的那些新入口点导入特殊功能并调用它们。
我们只需要编写如下：
function App() {
return <h1>Hello World</h1>;
}
即可被转换为
// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
但是需要注意是的：虽然我们的原始代码不再需要导入React来使用JSX！（但是我们仍然需要导入 React 才能使用 Hooks 或 React 提供的其他导出。）
也为这块儿转换的性能优化留了些许伏笔
具体可参考如下链接，这儿就不详细描述啦github.com/reactjs/rfc…
升级到新的 JSX 转换
如何升级到新的JSX转换
_如果要升级，则需要两件事： _
- _一个支持新转换的React版本（当前，只有React 17 RC支持它，但是在React 17.0发布之后，我们计划针对0.14.x，15.x和16.x发行其他兼容版本）。 _
- 兼容的编译器（请参阅下面有关不同工具的说明）。
升级带来的问题
此更改与所有现有 JSX 代码完全兼容，即：
- 原有的 api 不会被丢弃的，可以选择不迁移直接升级 react 版本。
- 当然我们选择迁移，新旧写法也可以同时存在。
- 同时，react 官方还提供了迁移的脚本，该脚本将从代码库中删除不必要的导入。
