第2074期React 17.0.0-rc.2 版本发布,引入全新的 JSX 转换

Posted 前端早读课

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第2074期React 17.0.0-rc.2 版本发布,引入全新的 JSX 转换相关的知识,希望对你有一定的参考价值。

前言

上周五Vue3发布。本周三React又有动作,详细本文。今日早读文章由@QC-L翻译授权分享。

正文从这开始~~

北京时间 9 月 23 日凌晨,React 团队发布了关于全新 JSX 转换的博客,同时发布了 React 17.0.0-rc.2 版本,新的 JSX 转换不再依赖 React 环境,在转换时会自动引入新的 runtime。

虽然 React 17 并未包含新特性[1],但它将提供一个全新版本的 JSX 转换。本文中,我们将为你描述它是什么以及如何使用。

何为 JSX 转换?

在浏览器中无法直接使用 JSX,所以大多数 React 开发者需依靠 Babel 或 TypeScript 来将 JSX 代码转换为 javascript。许多包含预配置的工具,例如 Create React App 或 Next.js,在其内部也引入了 JSX 转换。

React 17 发布在即,尽管我们想对 JSX 的转换进行改进,但我们不想打破现有的配置。于是我们选择与 Babel[2] 合作,为想要升级的开发者提供了一个全新版本的,重构过的 JSX 转换。

升级至全新的转换完全是可选的,但升级它会为你带来一些好处:

  • 使用全新的转换,你可以单独使用 JSX 而无需引入 React。

  • 根据你的配置,JSX 的编译输出可能会略微改善 bundle 的大小。

  • 它将减少你需要学习 React 概念的数量,以备未来之需。

此次升级不会改变 JSX 语法,也并非必须。旧的 JSX 转换将继续工作,没有计划取消对它的支持。

React 17 的 RC 版本[3] 已经引入了对全新 transform 的支持,所以你可以尝试一下!为了让大家更容易使用,在 React 17 正式发布后,我们还计划将其支持 React 16.x,React 15.x 以及 React 0.14x。你可以在下方[4]找到不同环境的升级说明。

接下来,我们来仔细对比新旧转换的区别。

新的转换有何不同?

当你使用 JSX 时,编译器会将其转换为浏览器可以理解的 React 函数调用。旧的 JSX 转换会把 JSX 转换为 React.createElement(...) 调用。

例如,假设源代码如下:

 
   
   
 
  1. import React from 'react';


  2. function App() {

  3. return <h1>Hello World</h1>;

  4. }

旧的 JSX 转换会将上述代码变成普通的 JavaScript 代码:

 
   
   
 
  1. import React from 'react';


  2. function App() {

  3. return React.createElement('h1', null, 'Hello world');

  4. }

注意:无需改变源码。我们将介绍 JSX 转换如何将你的 JSX 源码变成浏览器可以理解的 JavaScript 代码。

然而,这并不完美:

  • 如果使用 JSX,则需在 React 的环境下,因为 JSX 将被编译成 React.createElement。

  • 有一些 React.createElement 无法做到的 性能优化和简化[5]

为了解决这些问题,React 17 在 React 的 package 中引入了两个新入口,这些入口只会被 Babel 和 TypeScript 等编译器使用。新的 JSX 转换不会将 JSX 转换为 React.createElement,而是自动从 React 的 package 中引入新的入口函数并调用。例如:

 
   
   
 
  1. function App() {

  2. return <h1>Hello World</h1>;

  3. }

现在将转换为:

 
   
   
 
  1. // 由编译器引入(禁止自己引入!)

  2. import {jsx as _jsx} from 'react/jsx-runtime';


  3. function App() {

  4. return _jsx('h1', { children: 'Hello world' });

  5. }

注意,此时源代码无需引入 React 即可使用 JSX 了!(但仍需引入 React,以便使用 React 提供的 Hook 或其他导出。)

此变化与所有现有 JSX 代码兼容,所以你无需修改组件。如果你对此感兴趣,你可以查看 RFC[6] 了解全新转换工作的具体细节。

注意:react/jsx-runtime 和 react/jsx-dev-runtime 中的函数只能由编译器转换使用。如果你需要在代码中手动创建元素,你可以继续使用 React.createElement。它将继续工作,不会消失。

如何升级至新的转换

如果你还没准备好升级为全新的 JSX 转换,或者你正在为其他库使用 JSX,请不要担心,旧的转换不会被移除,并将继续支持。

如果你想升级,你需要准备两件事:

  • 支持新转换的 React 版本(目前,只有 React 17 的 RC 版本[7] 支持它,但是 React 17.0 发布后,我们计划针对 0.14.x、15.x 以及 16.x 做兼容。)

  • 一个兼容新转换的编译器(请看下面关于不同工具的说明)。

由于新的 JSX 转换不依赖 React 环境,我们准备了一个自动脚本[8],用于移除你代码中不必要的引入。

Create React App

Create React App 已对其做兼容支持[9],并将在 即将发布的 v4.0 版本[10]中提供,该版本处于测试阶段。

Next.js

Next.js 的 v9.5.3[11]+ 会使用新的转换来兼容 React 版本。

Gatsby

Gatsby 的 v2.24.5[12]+ 会使用新的转换来兼容 React 版本。

注意:如果你在 Gatsby 中遇到 error[13],请升级至 17.0.0-rc.2,运行 npm update 解决此问题。

手动配置 Babel

Babel 的 v7.9.0[14] 及以上版本可支持全新的 JSX 转换。

首先,你需要更新至最新版本的 Babel 和 transform 插件。

如果你使用的是 @babel/plugin-transform-react-jsx:

 
   
   
 
  1. # npm 用户

  2. npm update @babel/core @babel/plugin-transform-react-jsx

 
   
   
 
  1. # yarn 用户

  2. yarn upgrade @babel/core @babel/plugin-transform-react-jsx

如果你使用的是 @babel/preset-react:

 
   
   
 
  1. # npm 用户

  2. npm update @babel/core @babel/preset-react

 
   
   
 
  1. # yarn 用户

  2. yarn upgrade @babel/core @babel/preset-react

目前,旧的转换的默认选项为("runtime": "classic")。如需启用新的转换,你可以使用 {"runtime": "automatic"} 作为 @babel/plugin-transform-react-jsx 或 @babel/preset-react 的选项:

 
   
   
 
  1. // 如果你使用的是 @babel/preset-react

  2. {

  3. "presets": [

  4. ["@babel/preset-react", {

  5. "runtime": "automatic"

  6. }]

  7. ]

  8. }

 
   
   
 
  1. // 如果你使用的是 @babel/plugin-transform-react-jsx

  2. {

  3. "plugins": [

  4. ["@babel/plugin-transform-react-jsx", {

  5. "runtime": "automatic"

  6. }]

  7. ]

  8. }

从 Babel 8 开始,"automatic" 会将两个插件默认集成在 rumtime 中。欲了解更多信息,请查阅 Babel 文档中的 @babel/plugin-transform-react-jsx[15] 以及 @babel/preset-react[16]

注意:如果你在使用 JSX 时,使用 React 以外的库,你可以使用 importSource 选项[17]从该库中引入 — 前提是它提供了必要的入口。或者你可以继续使用经典的转换,它会继续被支持。

ESLint

如果你正在使用 eslint-plugin-react[18],其中的 react/jsx-uses-react 和 react/react-in-jsx-scope 规则将不再需要,可以关闭它们或者删除。

 
   
   
 
  1. {

  2. // ...

  3. "rules": {

  4. // ...

  5. "react/jsx-uses-react": "off",

  6. "react/react-in-jsx-scope": "off"

  7. }

  8. }

TypeScript

TypeScript 将在 v4.1 beta[19] 版本中支持新的 JSX 转换。

Flow

Flow 将在 v0.126.0[20] 中支持新的 JSX 转换。

移除未使用的 React 引入

因为新的 JSX 转换会自动引入必要的 react/jsx-runtime 函数,因此当你使用 JSX 时,将无需再引入 React。将可能会导致你代码中有未使用到的 React 引入。保留它们也无伤大雅,但如果你想删除它们,我们建议运行 “codemod”[21] 脚本来自动删除它们:

 
   
   
 
  1. cd your_project

  2. npx react-codemod update-react-imports

注意:

如果你在运行 codemod 时出现错误,请尝试使用 npx react-codemod update-react-imports 选择不同的 JavaScript 环境。尤其是选择 "JavaScript with Flow" 时,即使你未使用 Flow,也可以选择它,因为它比 JavaScript 支持更新的语法。如果遇到问题,请告知我们[22]

请注意,codemod 的输出可能与你的代码风格并不匹配,因此你可能需要在 codemod 完成后执行 Prettier[23] 以保证格式一致。

运行 codemod 会执行如下操作:

  • 升级到新的 JSX 转换,删除所有未使用的 React 引入。

  • 改变所有 React 的默认引入将被改为解构命名引入(例如,import React from "react" 会变成 import { useState } from "react"),这将成为未来开发的首选风格。codemod 不会 影响现有的命名空间引入方式(即 import * as React from "react"),这也是一种有效的风格,默认的引入将在 React 17 中继续工作,但从长远来看,我们建议尽量不使用它们。

示例:

 
   
   
 
  1. import React from 'react';


  2. function App() {

  3. return <h1>Hello World</h1>;

  4. }

将被替换为

 
   
   
 
  1. function App() {

  2. return <h1>Hello World</h1>;

  3. }

如果你使用了 React 的其他导出 — 比如 Hook,那么 codemod 将把它们转换为具名导入。

示例:

 
   
   
 
  1. import React from 'react';


  2. function App() {

  3. const [text, useText] = React.useState('Hello World');

  4. return <h1>{text}</h1>;

  5. }

会被替换为

 
   
   
 
  1. import { useState } from 'react';


  2. function App() {

  3. const [text, useText] = useState('Hello World');

  4. return <h1>{text}</h1>;

  5. }

除了清理未使用的引入外,此工具还可帮你为未来 React 主要版本(不是 React 17 版本)做铺垫,该版本将支持 ES 模块,并且没有默认导出。

鸣谢

我们要感谢 Babel,TypeScript,Create React App,Next.js,Gatsby,ESLint 以及 Flow 的主要维护者为新 JSX 转换提供的实现和整合。我们还要感谢 React 社区对相关 RFC[24] 提供的反馈和讨论。

参考

[1]: 并未包含新特性: /blog/2020/08/10/react-v17-rc.html

[2]: Babel: https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154httpsgithubcombabelbabelpull11154

[3]: React 17 的 RC 版本: /blog/2020/08/10/react-v17-rc.html

[4]: 下方: #how-to-upgrade-to-the-new-jsx-transform

[5]: 性能优化和简化: https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation

[6]: RFC: https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#detailed-design

[7]: React 17 的 RC 版本: /blog/2020/08/10/react-v17-rc.html

[8]: 我们准备了一个自动脚本: #removing-unused-react-imports

[9]: 对其做兼容支持: https://github.com/facebook/create-react-app/pull/9645

[10]: 即将发布的 v4.0 版本: https://gist.github.com/iansu/282dbe3d722bd7231fa3224c0f403fa1

[11]: v9.5.3: https://github.com/vercel/next.js/releases/tag/v9.5.3

[12]: v2.24.5: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/CHANGELOG.md#22452-2020-08-28

[13]: Gatsby 中遇到 error: https://github.com/gatsbyjs/gatsby/issues/26979

[14]: v7.9.0: https://babeljs.io/blog/2020/03/16/7.9.0

[15]: @babel/plugin-transform-react-jsx: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

[16]: @babel/preset-react: https://babeljs.io/docs/en/babel-preset-react

[17]: importSource 选项: https://babeljs.io/docs/en/babel-preset-react#importsource

[18]: eslint-plugin-react: https://github.com/yannickcr/eslint-plugin-react

[19]: v4.1 beta: https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories

[20]: v0.126.0: https://github.com/facebook/flow/releases/tag/v0.126.0

[21]: “codemod”: https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb

[22]: 告知我们: https://github.com/reactjs/react-codemod/issues

[23]: Prettier: https://prettier.io/

[24]: RFC: https://github.com/reactjs/rfcs/pull/107

为你推荐






欢迎自荐投稿,前端早读课等你来

以上是关于第2074期React 17.0.0-rc.2 版本发布,引入全新的 JSX 转换的主要内容,如果未能解决你的问题,请参考以下文章

第1493期 React 的今天和明天(图文版)第一部分

车道线识别基于matlab hough变换道路检测直线检测含Matlab源码 2074期

车道线识别基于matlab hough变换道路检测直线检测含Matlab源码 2074期

第1412期React Native vs. CordovaPhoneGapIonic,等等

前端每周清单第 24 期:React 16 中异常处理与 Fiber 实战Vue 图表与 jQuery 插件

第91期React虚拟Dom解析