React 17 正式发布！更新一览

最新推荐文章于 2024-10-11 07:29:39 发布

前端开发博客

最新推荐文章于 2024-10-11 07:29:39 发布

阅读量6.3k

点赞数

就在今天，React 团队正式发布了 React 17，这次发布带来了哪些内容？

没有新特性

React 17版本不同寻常，因为它没有添加任何面向开发人员的新功能。取而代之的是，该发行版主要致力于简化React本身的升级。

逐步升级

之前 React 15升级到 React 16，你需要将整个应用一次性升级。但无疑如果存在多年前的老代码，升级是个不小的挑战。尽管可以在页面上同时使用两个版本的React，但是直到React 17仍然很脆弱，并导致事件问题。

我们正在解决React 17的许多问题。这意味着当React 18和下一个未来版本问世时，您现在将有更多选择。第一种选择是像以前可能那样一次升级整个应用程序。但是您也可以选择逐个升级您的应用程序。例如，您可能决定将大部分应用程序迁移到React 18，但在React 17上保留一些延迟加载的对话框或子路由。

这并不意味着您必须逐步升级。对于大多数应用程序，一次全部升级仍然是最好的解决方案。加载两个版本的React（即使其中一个是按需延迟加载）仍然不理想。但是，对于没有积极维护的大型应用程序，可以考虑使用此选项，React 17可以使这些应用程序不落伍。

我们将其他更改推迟到React 17之后，就是为了本次发布能渐进升级。如果升级React 17过于困难，这将违背原本意图。

事件代理更改

在React 17中，React将不再在后台的文档级别附加事件处理程序。取而代之的是，它将它们附加到渲染您的React树的根DOM容器：

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

在React 16和更早的版本中，React将对大多数事件执行document.addEventListener（）。React 17将在后调用rootNode.addEventListener（）。

其它重大变化

在React v17 RC博客中已经描述了其余的重大更改。
官方已经在Facebook产品代码中的100,000多个组建中更改少于20个组件即可完成升级，所以大家在升级的时候应该可以轻松点。

新的JSX转换

React 17支持新的JSX转换。我们还将对它支持到React 16.14.0，React 15.7.0和0.14.10。需要注意的是，这是完全选择启用的，您也不必使用它。之前的JSX转换的方式将继续存在，并且没有计划停止对其支持。

安装

npm install react@17.0.0 react-dom@17.0.0

CDN

<script crossorigin src="https://unpkg.com/react@17.0.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.production.min.js"></script>

Changelog

React

为全新的 JSX 转换器添加 react/jsx-runtime 和 react/jsx-dev-runtime。（@lunaruan 提交于 #18299）
根据原生框架构建组件调用栈。（@sebmarkbage 提交于 #18561）
可以在 context 中设置 displayName 以改善调用栈信息。（@eps1lon 提交于 #18224）
防止 'use strict' 从 UMD 的 bundles 中泄露。（@koba04 提交于 #19614）
停止使用 fb.me 进行重定向。（@cylim 提交于 #19598）

React DOM

将事件委托从 document 切换为 root。（@trueadm 提交于 #18195 及其他）
在运行下一个副作用前，请清理所有副作用。（@bvaughn 提交于 #17947）
异步运行 useEffect 清理函数。（@bvaughn 提交于 #17925）
使用浏览器的 focusin 和 focusout 替换 onFocus 和 onBlur 的底层实现。（@trueadm 提交于 #19186）
将所有 Capture 事件都使用浏览器的捕获阶段实现。（@trueadm 提交于 #19221）
禁止在 onScroll 事件时冒泡。（@gaearon 提交于 #19464)
如果 forwardRef 或 memo 组件的返回值为 undefined，则抛出异常。（@gaearon 提交于 #19550）
移除事件池。（@trueadm 提交于 #18969）
移除 React Native Web 不需要的内部组件。（@necolas 提交于 #18483)
当挂载 root 时，附加所有已知的事件监听器。（@gaearon 提交于 #19659）
在 Dev 模式下，禁用第二次渲染过程中的 console。（@sebmarkbage 提交于 #18547）
弃用为记录且具有误导性的 ReactTestUtils.SimulateNative API。（@gaearon 提交于 #13407)
重命名内部使用的私有字段（@gaearon 提交于 #18377）
不在开发环境调用 User Timing API。（@gaearon 提交于 #18417）
在严格模式下重复渲染期间禁用 console。（@sebmarkbage 提交于 #18547）
在严格模式下，二次渲染组件也不使用 Hook。（@eps1lon 提交于 #18430）
允许在生命周期函数中调用 ReactDOM.flushSync（但会发出警告）。（@sebmarkbage 提交于 #18759）
将 code 属性添加到键盘事件对象中。（@bl00mber 提交于 #18287）
为 video 元素添加 disableRemotePlayback 属性。（@tombrowndev 提交于 #18619）
为 input 元素添加 enterKeyHint 属性。（@eps1lon 提交于 #18634）
当没有给 <Context.Provider> 提供任何值时，会发出警告。（@charlie1404 提交于 #19054）
如果 forwardRef 或 memo 组件的返回值为 undefined，则抛出警告。（@bvaughn 提交于 #19550）
为无效更新改进错误信息。（@JoviDeCroock 提交于 #18316）
从调用栈信息中忽略 forwardRef 和 memo。（@sebmarkbage 提交于 #18559）
在受控输入与非受控输入间切换时，改善错误消息。（@vcarl 提交于 #17070）
保持 onTouchStart、onTouchMove 和 onWheel 默认为 passive。（@gaearon 提交于 #19654）
修复在 development 模式下 iframe 关闭时，setState 挂起的问题。（@gaearon 提交于 #19220）
使用 defaultProps 修复拉架子组件在渲染时的问题。（@jddxf 提交于 #18539）
修复当 dangerouslySetInnerHTML 为 undefined 时，误报警告的问题。（@eps1lon 提交于 #18676）
使用费标准的 require 实现来修复 Test Utils。（@just-boris 提交于 #18632）
修复 onBeforeInput 报告错误的 event.type。（@eps1lon 提交于 #19561）
修复 Firefox 中 event.relatedTarget 输出为 undefined 的问题。（@claytercek 提交于 #19607）
修复 IE11 中 “unspecified error” 的问题。（@hemakshis 提交于 #19664）
修复 shadow root 中的渲染问题。（@Jack-Works 提交于 #15894）
使用事件捕获修复 movementX/Y polyfill 的问题。（@gaearon 提交于 #19672）
使用委托处理 onSubmit 和 onReset 事件。（@gaearon 提交于 #19333）
提高内存使用率。（@trueadm 提交于 #18970）

React DOM Server

使用服务端渲染的 useCallback 与 useMemo 一致。（@alexmckenley提交于 #18783）
修复函数组件抛出异常时状态泄露的问题。（@pmaccart 提交于 #19212）

React Test Renderer

改善 findByType 错误信息。（@henryqdineen 提交于 #17439）

Concurrent Mode (实验阶段)

改进启发式更新算法。（@acdlite 提交于 #18796）
在实现性 API 前添加 unstable_ 前缀。(@acdlite 提交于 #18825)
移除 unstable_discreteUpdates 和 unstable_flushDiscreteUpdates。（@trueadm 提交于 #18825）
移除了 timeoutMs 参数。（@acdlite 提交于 #19703）
禁用 <div hidden /> 预渲染，以支持未来的 API。（@acdlite 提交于 #18917）
为 Suspense 添加了 unstable_expectedLoadTime，用于 CPU-bound 树。（@acdlite 提交于 #19936）
添加了一个实现性的 unstable_useOpaqueIdentifier Hook。（@lunaruan 提交于 #17322）
添加了一个实验性的 unstable_startTransition API. (@rickhanlonii 提交于 #19696)
在测试渲染器中使用 act 后，不在刷新 Suspense 的 fallback。（@acdlite 提交于 #18596）
将全局渲染的 timeout 用于 CPU Suspense。（@sebmarkbage 提交于 #19643）
挂载前，清除现有根目录的内容。（@bvaughn 提交于 #18730）
修复带有错误边界的 bug。（@acdlite 提交于 #18265）
修复了导致挂起树更新丢失的 bug。（@acdlite 提交于 #18384 以及 #18457）
修复导致渲染阶段更新丢失的 bug。（@acdlite 提交于 #18537）
修复 SuspenseList 的 bug。（@sebmarkbage 提交于 #18412）
修复导致 Suspense fallback 过早显示的 bug。（@acdlite 提交于 #18411）
修复 SuspenseList 中使用 class 组件异常的 bug。（@sebmarkbage 提交于 #18448）
修复输入内容可能被更新被丢弃的 bug。（@jddxf 提交于 #18515 以及 @acdlite 提交于 #18535）
修复暂挂 Suspense fallback 后卡住的错误。（@acdlite 提交于 #18663）
如果 hydrate 中，不要切断 SuspenseList 的尾部。（@sebmarkbage 提交于 #18854）
修复 useMutableSource 中的 bug，此 bug 可能在 getSnapshot 更改时出现。（@bvaughn 提交于 #18297）
修复 useMutableSource 令人恶心的 bug。（@bvaughn 提交于 #18912）
如果外部渲染且提交之前调用 setState，会发出警告。（@sebmarkbage 提交于 #18838）