React v17.0 正式發佈！能夠升級啦

很差意思，我又來了，繼兩篇 React 17 RC 版本後，React 17 迎來了正式版本，正式版本較以前改動不大，但意味着能夠正式投入生產了，喜大普奔。

今天，咱們宣佈 React 17 正式發佈！在此以前，咱們在 React 17 RC 的博文中已經介紹了 React 17 發佈的意義以及包含的變化。此文是針對那篇文章的簡單總結，若是你已閱讀過那篇博文，此文可略過。

無新特性

React v17 的發佈非比尋常，由於它沒有增長任何面向開發者的新特性。可是，這個版本會使得 React 自身的升級變得更加容易。

值得特別說明的是，React v17 做爲後續版本的 」基石「，它讓不一樣版本的 React 相互嵌套變得更加容易。

除此以外，還會使 React 更容易嵌入到由其餘技術構建的應用中。

漸進式升級

React v17 開啓了 React 漸進式升級的新篇章。當你從 React 15 升級至 16 時（或者，從 16 升級到 17），你一般會一次性升級整個應用程序，這對大部分應用來講十分有效。可是，若是代碼庫編寫於幾年前，而且沒有及時的維護升級，這會使得升級成本愈來愈高。而且，在 React 17 以前，若是在同一個頁面上使用不一樣的 React 版本（能夠這麼作，可是有風險），會致使事件問題的出現，會有一些未知的風險。

咱們正在修復 React v17 中的許多問題。這意味着，當 React 18 或將來版原本臨時，你將有更多選擇。首選，固然仍是一次性升級整個應用；但你還有個可選方案，漸進式升級你的應用。舉個例子，你可能將大部分功能升級至 React v18，但保留部分懶加載的對話框或子路由在 React v17。

但這並不意味着你必須進行漸進式升級。對於大多數應用來講，一次性升級還是更好的選擇。加載兩個版本的 React，仍然不是理想方案 —— 即便其中一個版本是按需加載的。但對於那些長期未維護的大型應用來講，這意義非凡，React v17 開始讓這些應用不會被輕易淘汰。

咱們準備了示例倉庫，此示例演示瞭如何在必要時懶加載舊版本的 React。此示例由 Create React App 構建，使用其餘工具也能夠實現一樣的效果。歡迎使用其餘工具的小夥伴經過 PR 的形式提供 Demo。

注意

咱們將其餘特性推遲到了 React v17 以後。這個版本的目標就是實現漸進式升級。若是升級到 17 很困難，那就違背了此版本的目的。

事件委託的變動

爲了實現漸進式升級，咱們須要對 React 的事件系統進行修改。React 17 是一個重要版本，由於這個版本的可能存在破壞性更改。關於版本的更多信息，請查閱版本的 FAQ，以瞭解咱們對版本穩定性的承諾。

React v17 中，React 不會再將事件處理添加到 document 上，而是將事件處理添加到渲染 React 樹的根 DOM 容器中：

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

在 React 16 及以前版本中，React 會對大多數事件進行 document.addEventListener() 操做。React v17 開始會經過調用 rootNode.addEventListener() 來代替。

此圖展現了 React 17 如何將事件鏈接到根節點而非 document

經覈實，多年來在 issue 追蹤器 上報告的許多問題都已被新特性解決，其中大多與將 React 與非 React 代碼集成有關。

若是你在升級時遇到了這方面的問題，能夠看看這個常見的解決方案。

其餘破壞性更改

React v17 的 RC 博文描述了關於 React v17 中其餘的破壞性更改。

咱們在升級 Facebook 項目代碼中 10w+ 組件的過程當中，只修改了不到 20 個組件，因此**咱們猜想大多數應用在升級 v17 時，不會有太大的問題。**若是你遇到任何問題，請告訴咱們。

全新的 JSX 轉換

React v17 支持了全新的 JSX 轉換。咱們還針對 React 16.14.0，React 15.7.0 和 0.14.0 版本作了兼容。請注意，此功能徹底可選，並不是必須使用。以前的 JSX 轉換將會繼續維護，而且沒有中止支持它的計劃。

React Native

React Native 會有一個單獨的發佈計劃。目前，咱們預計對 React v17 的支持會在 React Native 0.65 中落地，但具體版本可能會有出入。你能夠在 React Native 社區的發佈 issue tracker 上參與討論。

安裝

使用 npm 安裝 React v17：

npm install react@17.0.0 react-dom@17.0.0

使用 yarn 安裝 React v17：

yarn add react@17.0.0 react-dom@17.0.0

咱們還提供了由 UMD 構建的 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>

請參閱文檔中的詳細安裝說明。

變動日誌

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）

關注我

前端之露不迷路，我是露姐，如今是網易資深前端，歡迎你們關注我，給你們帶來前端優質文章分享！

本文分享自微信公衆號 - 前端之露（gh_ef72c6726e70）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。