关于react.js:React-17-正式发布更新一览

残缺更新见官网 React v17.0 残缺翻译

就在明天，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）