技术标签: anddisign 2.x table无法引入 jsxbin to jsx IWorkbook 引入 tomocat 允许iframe 引入 npm install cracoc 老版本 rails6 引入 bootstrap
北京时间 9 月 23 日凌晨,React 团队发布了关于全新 JSX 转换的博客,同时发布了 React 17 的 RC 版本,新的 JSX 转换不再依赖 React 环境,在转换时会自动引入新的 runtime。
原文链接: https:// reactjs.org/blog/2020/0 9/22/introducing-the-new-jsx-transform.html
作者:Luna Ruan
译者:QC-L
译文首发与 React 中文文档博客,欢迎关注 https://zh-hans.reactjs.org 或者关注 印记中文公众号。
虽然 React 17 并未包含新特性[1],但它将提供一个全新版本的 JSX 转换。本文中,我们将为你描述它是什么以及如何使用。
在浏览器中无法直接使用 JSX,所以大多数 React 开发者需依靠 Babel 或 TypeScript 来将 JSX 代码转换为 JavaScript。许多包含预配置的工具,例如 Create React App 或 Next.js,在其内部也引入了 JSX 转换。
React 17 发布在即,尽管我们想对 JSX 的转换进行改进,但我们不想打破现有的配置。于是我们选择与 Babel[2] 合作,为想要升级的开发者提供了一个全新版本的,重构过的 JSX 转换。
升级至全新的转换完全是可选的,但升级它会为你带来一些好处:
此次升级不会改变 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(...)
调用。
例如,假设源代码如下:
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 转换如何将你的 JSX 源码变成浏览器可以理解的 JavaScript 代码。
然而,这并不完美:
React
的环境下,因为 JSX 将被编译成 React.createElement
。React.createElement
无法做到的 性能优化和简化[5]。为了解决这些问题,React 17 在 React 的 package 中引入了两个新入口,这些入口只会被 Babel 和 TypeScript 等编译器使用。新的 JSX 转换不会将 JSX 转换为 React.createElement
,而是自动从 React 的 package 中引入新的入口函数并调用。例如:
function App() {
return <h1>Hello World</h1>;
}
现在将转换为:
// 由编译器引入(禁止自己引入!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
注意,此时源代码无需引入 React 即可使用 JSX 了!(但仍需引入 React,以便使用 React 提供的 Hook 或其他导出。)
此变化与所有现有 JSX 代码兼容,所以你无需修改组件。如果你对此感兴趣,你可以查看 RFC[6] 了解全新转换工作的具体细节。
注意react/jsx-runtime
和react/jsx-dev-runtime
中的函数只能由编译器转换使用。如果你需要在代码中手动创建元素,你可以继续使用React.createElement
。它将继续工作,不会消失。
如果你还没准备好升级为全新的 JSX 转换,或者你正在为其他库使用 JSX,请不要担心,旧的转换不会被移除,并将继续支持。
如果你想升级,你需要准备两件事:
由于新的 JSX 转换不依赖 React 环境,我们准备了一个自动脚本[8],用于移除你代码中不必要的引入。
Create React App 已对其做兼容支持[9],并将在 即将发布的 v4.0 版本[10]中提供,该版本处于测试阶段。
Next.js 的 v9.5.3[11]+ 会使用新的转换来兼容 React 版本。
Gatsby 的 v2.24.5[12]+ 会使用新的转换来兼容 React 版本。
注意
如果你在 Gatsby 中遇到 error[13],请升级至17.0.0-rc.2
,运行npm update
解决此问题。
Babel 的 v7.9.0[14] 及以上版本可支持全新的 JSX 转换。
首先,你需要更新至最新版本的 Babel 和 transform 插件。
如果你使用的是 @babel/plugin-transform-react-jsx
:
# npm 用户
npm update @babel/core @babel/plugin-transform-react-jsx
# yarn 用户
yarn upgrade @babel/core @babel/plugin-transform-react-jsx
如果你使用的是 @babel/preset-react
:
# npm 用户
npm update @babel/core @babel/preset-react
# yarn 用户
yarn upgrade @babel/core @babel/preset-react
目前,旧的转换的默认选项为("runtime": "classic"
)。如需启用新的转换,你可以使用 {"runtime": "automatic"}
作为 @babel/plugin-transform-react-jsx
或 @babel/preset-react
的选项:
// 如果你使用的是 @babel/preset-react
{
"presets": [
["@babel/preset-react", {
"runtime": "automatic"
}]
]
}
// 如果你使用的是 @babel/plugin-transform-react-jsx
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"runtime": "automatic"
}]
]
}
从 Babel 8 开始,"automatic"
会将两个插件默认集成在 rumtime 中。欲了解更多信息,请查阅 Babel 文档中的 @babel/plugin-transform-react-jsx[15] 以及 @babel/preset-react[16]。
注意
如果你在使用 JSX 时,使用 React 以外的库,你可以使用 `importSource` 选项[17]从该库中引入 — 前提是它提供了必要的入口。或者你可以继续使用经典的转换,它会继续被支持。
如果你正在使用 eslint-plugin-react[18],其中的 react/jsx-uses-react
和 react/react-in-jsx-scope
规则将不再需要,可以关闭它们或者删除。
{
// ...
"rules": {
// ...
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
}
TypeScript 将在 v4.1 beta[19] 版本中支持新的 JSX 转换。
Flow 将在 v0.126.0[20] 中支持新的 JSX 转换。
因为新的 JSX 转换会自动引入必要的 react/jsx-runtime
函数,因此当你使用 JSX 时,将无需再引入 React。将可能会导致你代码中有未使用到的 React 引入。保留它们也无伤大雅,但如果你想删除它们,我们建议运行 “codemod”[21] 脚本来自动删除它们:
cd your_project
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 会执行如下操作:
import React from "react"
会变成 import { useState } from "react"
),这将成为未来开发的首选风格。codemod 不会 影响现有的命名空间引入方式(即 import * as React from "react"
),这也是一种有效的风格,默认的引入将在 React 17 中继续工作,但从长远来看,我们建议尽量不使用它们。示例:
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
将被替换为
function App() {
return <h1>Hello World</h1>;
}
如果你使用了 React 的其他导出 — 比如 Hook,那么 codemod 将把它们转换为具名导入。
示例:
import React from 'react';
function App() {
const [text, useText] = React.useState('Hello World');
return <h1>{text}</h1>;
}
会被替换为
import { useState } from 'react';
function App() {
const [text, useText] = useState('Hello World');
return <h1>{text}</h1>;
}
除了清理未使用的引入外,此工具还可帮你为未来 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
文章浏览阅读1.3k次。驱动编程01-开发环境的简单介绍驱动编程02-C语言语法介绍驱动编程03-运算符 表达式 语句 循环驱动编程04-分支和跳转驱动编程05-进制01驱动编程06-进制的运算驱动编程07-数组和指针驱动编程08-数组和指针驱动编程09-数组和指针驱动编程10-结构体驱动编程11-结构体驱动编程12-指针驱动编程13-指针驱动编程14-指针驱动编程15-指针驱动编程16C+..._编写外挂时过保护是什么意思
文章浏览阅读129次。Dimensinality reduction and topic modeling0 AbstractBOW not effective facing synonym and polysemy.Dimension reduction can solve this, represent a document in lower-dimension, and reflect concepts.Two froms of dimension reduction:latent semantic index_topic modeling, dimensionality reduction
文章浏览阅读175次。官网地址: https://pytorch.org/docs/stable/generated/torch.nn.AdaptiveAvgPool1d.html#torch.nn.AdaptiveAvgPool1d。
文章浏览阅读1.6k次,点赞13次,收藏6次。场景: 一个视频播放窗口,需要功能是可移动,可拉动改变大小 结果在快速移动时,有些电脑出现了花屏, why? 在onmousemove响应移动加拉动消息 大多数电脑是正常的,偶尔少数电脑出现了这情况, 最后我的结论是:onmousemove进入的消息太多,差的电脑处理不过来,_onmousemove闪烁
文章浏览阅读160次。项目运行环境配置:Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。_自习室预订代码
文章浏览阅读865次。Android项目-闪屏界面与GridView闪屏界面一般闪屏界面是应用的第一个界面。应用在闪屏界面做的主要工作一般有:展示logo(应用logo、公司logo)项目初始化检测版本更新校验程序的合法性(比如是否有网络) 闪屏界面显示的内容一般都是一张背景图片。我们将图片作为布局的背景即可 闪屏页面一般至少要显示一段时间Point1 (去除标题)一般应用,是没有标题的,有的话太难看了_android gridview初始化引起的闪烁
文章浏览阅读1.1w次,点赞2次,收藏12次。cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议和选项,如HTTP、FTP、TELNET等,能提供 URL 请求相关的各种细节信息。最爽的是,PHP 也支持 cURL 库。本文将介绍 cURL 的一些高级特性,以及在 PHP 中如何运用它。1 为什么要用cURL?是的,我们可以通过其他办法获取网页内容。大多数时候,我因为想偷懒,都直接用简单的 PH_curl查看网页内容
文章浏览阅读182次。5.打开VS2019的命令行工具"Developer Command Prompt for VS 2019",然后cd切换到第3步的build文件夹。7.打开生成的glog.sln工程,菜单栏依次"生成"->“批生成”,然后在"批生成"窗口,先点击"全选",然后点击"重新生成"即可。1.去https://github.com/google/glog下载最新的release版本glog-0.6.0.zip。3.在解压后的glog-0.6.0目录,创建build文件。,以生成VS2019的sln工程。_glog window
文章浏览阅读1.5w次。SELECT * FROM [dbname].[dbo].[db_tbl] WHERE NAME LIKE '%[吖-座]%'_sql查询判断
文章浏览阅读6.1k次,点赞2次,收藏14次。#include <winapifamily.h>/*++ BUILD Version: 0001 Increment this if a change has global effectsCopyright (c) Microsoft Corporation. All rights reserved.Module Name: windows.hAbs..._windows.h下载
文章浏览阅读826次。正则表达式:符合一定规则的表达式功能:用于专门操作字符串特点:用于一些特定的符号来表示一定的代码操作,这样简化书写好处:可以简化对字符串的复杂操作弊端:符号定义越多,正则越长,阅读性极差规则:[abc]//a 或b 或c[^abc]//除了abc[a-d[m-p]]//a-d 或者m-p(并集)[a-e&&[def]]//d或者e(交集).任意字符\d _lgf表达式
文章浏览阅读398次。空天飞机是一种未来的飞机,它像普通飞机一样水平起飞,以每小时1.6万~3万公里的高超音速在大气层内飞行,在30~100公里高空的飞行速度为12~25倍音速,而且可以直接加速进入地球轨道,成为航天飞行器,返回大气层后,像飞机一样在机场着陆,成为自由地往返天地之间的运输工具。当今世界发达国家航空业均较为发达,发达的航空业是国家综合实力的体现,例如英美等国国内航空业比较发达,不仅会带动国内旅游事业发展,促进国民经济提升,而且发达的航空业更彰显着国家的经济与科技实力,对大国地位提升有重大的影响。_航天就是航空吗