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）