1. 了解 JSX Transform

JSX：

1
2
3
4
5
import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

原来的转换方式：

1
2
3
4
5
6
// 转换后需要调用 React.createElement，所以必须先手动引入 React
import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

新的转换方式：

1
2
3
4
5
6
// 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' });
}

2. 如何升级

默认支持新的转换方式

  • Create React App 4.0.0+
  • React 17
  • Next.js v9.5.3+
  • Gatsby v2.24.5+
  • TypeScript v4.1+

手动修改 Babel

  1. 升级 Babel 到 v7.9.0+
1
2
3
npm update @babel/core @babel/plugin-transform-react-jsx
# or
yarn upgrade @babel/core @babel/plugin-transform-react-jsx
  1. 升级 @babel/preset-react
1
2
3
npm update @babel/core @babel/preset-react
# or
yarn upgrade @babel/core @babel/preset-react
  1. .babelrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// If you're using @babel/plugin-transform-react-jsx
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

// If you are using @babel/preset-react
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

Starting from Babel 8, “automatic” will be the default runtime for both plugins.

ESLint 中关掉 react-in-jsx-scope

1
2
3
4
5
6
7
8
{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

最后，官方提供了一键更新项目中文件引入React的工具

1
2
cd your_project
npx react-codemod update-react-imports

还是比较靠谱的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';

function App() {
  const [text, setText] = React.useState('Hello World');
  return <h1>{text}</h1>;
}

// 将转换成如下：

import { useState } from 'react';

function App() {
  const [text, setText] = useState('Hello World');
  return <h1>{text}</h1>;
}