React推出併發模式：可中斷渲染、指定加載順序、並行處理多狀態

React推出併發模式：可中斷渲染、指定加載順序、並行處理多狀態

做者｜React 團隊譯者｜王強編輯｜王文婧警告：本文檔介紹的實驗功能在穩定版本中尚不可用。不要在生產應用程序中依賴 React 的實驗性構建。這些功能可能會發生重大更改，並且直到功能成爲 React 的一部分以前這類更改都不會發出警告。本文檔面向早期使用者和對此感興趣的用戶。若是你不熟悉 React，那就沒必要爲這些功能擔憂——它們並不是你如今就須要學習的內容。本文檔提供了併發模式（Concurrent Mode）的理論概述。若是須要更具體的介紹，能夠查閱文末的附錄。什麼是併發模式？

併發模式是一組新功能，能夠幫助 React 應用程序保持響應狀態，並適當調整用戶的設備功能和網絡速度。

這些功能仍處於實驗階段，將來可能會發生更改。它們還不是穩定的 React 版本的一部分，但你能夠在實驗版本中嘗試它們。

阻塞與可中斷渲染

爲了更好地解釋併發模式，咱們用版本控制來打比方。若是你在一個團隊中工做，大家可能會使用像 Git 這樣的版本控制系統，開發不少分支。當某個分支完成後，你能夠將你的工做合併到主幹上，這樣其餘人就能夠拉取它了。

版本控制系統還沒誕生的時候，開發工做流程是徹底不同的——那時沒有分支的概念，若是要編輯某些文件，必須告訴全部人在你完成工做以前不要碰這些文件。你甚至沒法與別人同時研究它們——實際上這些文件把你圈住了。

這就是今天包括 React 在內的 UI 庫常見的工做機制。一旦它們開始渲染一項更新，或者建立新的 DOM 節點，並在組件內部運行代碼等，它們就不會中斷這項工做。咱們將這種方法稱爲「阻止渲染」。

在併發模式下，渲染不會阻塞——它是可中斷的，這改善了用戶體驗。它還能夠解鎖之前沒法實現的一些新功能。這篇文檔就是對這一新功能的高層次概述。

可中斷渲染

考慮一個可過濾的產品列表。你可能遇到過這種狀況，那就是在列表過濾器中輸入過濾條件時，每次按鍵都會出現卡頓。更新產品列表時，某些工做多是不可避免的，例如建立新的 DOM 節點或由瀏覽器繪製佈局等。可是，咱們 什麼時候 以及 如何 執行這些任務是問題的關鍵所在。

解決卡頓的一種常見方法是對輸入「消除抖動」。啓用防抖功能後，咱們只會在用戶中止輸入 以後 才更新列表。但咱們敲鍵盤時，UI 是不會更新的，這很讓人泄氣。或者咱們能夠「限流」輸入，並以某個給定的頻率上限來更新列表。但在性能較低的設備上咱們仍然會卡頓。防抖和限流都會帶來不夠理想的用戶體驗。

卡頓的緣由很簡單：渲染開始後就不能中斷了，所以瀏覽器沒法在鍵盤按下後當即更新文本輸入。不管 UI 庫（例如 React）在基準測試上表現多好，若是它使用阻塞渲染，那麼總會有組件中的某些工做形成卡頓，並且一般沒有簡單的解決方案。

併發模式使渲染可中斷，從而從根本上解除了這一限制。這意味着當用戶按下一個鍵時，React 不須要阻止瀏覽器更新文本輸入。相反，它可讓瀏覽器繪製輸入的更新，而後繼續 在內存中 渲染更新後的列表。渲染完成後，React 將更新 DOM，更改將反映在屏幕上。

從概念上講，你能夠將其視爲 React 在「分支」上準備每一個更新的過程。就像你能夠放棄分支工做或在分支之間切換同樣，「併發模式」下的 React 能夠中斷正在進行的更新以執行更重要的任務，而後返回到以前的工做。這種技術可能會讓你想起視頻遊戲中的雙重緩衝。

併發模式技術減小了 UI 中的防抖和限流的需求。因爲渲染是可中斷的，所以 React 無需人爲地 延遲 工做來避免卡頓。它能夠當即開始渲染，但在須要使應用程序保持響應時會中斷這項工做。

指定加載順序

前文提到，併發模式就好像 React 使用「分支」工做同樣。分支不只對短時間修復有用，並且對長期運行的功能也有意義。有時你可能會開發某項功能，但可能要花幾周的時間才能使其處於「足夠好的狀態」以合併入主幹。和版本控制類似，渲染也是一個道理。

想象一下，咱們正在一個應用程序的兩個頁面之間跳轉。有時，咱們可能沒加載足夠的代碼和數據來在新頁面上向用戶顯示「足夠好」的加載狀態。跳轉到空白頁或顯示一個巨大的處理中的圖標是很是糟心的體驗。可是，獲取必要的代碼和數據每每也不會花費太長時間。若是 React 能夠在舊頁面上停留更長的時間，並在顯示新頁面以前「跳過」「不良加載狀態」，效果不就會更好了嗎？

儘管如今這是能夠作到的，但具體執行起來很麻煩。在併發模式下，這一功能是內置的。React 首先開始在內存中準備新頁面，或者正如咱們比喻的狀況，「在另外一個分支上」作準備。所以 React 能夠在更新 DOM 以前等待加載更多內容。在併發模式下，咱們能夠告訴 React 繼續顯示可徹底互動的舊頁面，並在頁面上嵌入加載指示器。當新頁面準備就緒時，React 就能夠帶咱們跳轉過去。

並 發回顧一下上面的兩個例子，看看併發模式如何將它們結合起來。在併發模式下， React 能夠並行處理多個狀態更新——就像不一樣的團隊成員使用分支獨立工做同樣：

• 對於受 CPU 影響的更新（例如建立 DOM 節點和運行組件代碼），併發意味着更緊急的更新能夠「中斷」已經開始的渲染。

• 對於受 IO 影響的更新（例如從網絡中獲取代碼或數據），併發意味着 React 甚至能夠在全部數據到達以前就開始在內存中渲染，無需顯示使人討厭的加載中狀態。

重點在於，你使用React 的方式沒有變化。組件、props 和狀態之類的概念本質上沒有改變。要更新屏幕時，你就會設置狀態。

React 使用啓發式方法來決定更新的「緊急程度」，並容許你使用少許幾行代碼來調整，以便在每次交互時都得到所需的用戶體驗。

將研究成果投入生產

這些併發模式功能有一個共同的目標。它的任務是幫助將人機交互研究的成果整合到現實的用戶界面中。

例如，研究代表，在頁面之間切換時顯示過多的中間加載狀態會 拖慢 切換速度，因此併發模式會使用固定的「時間表」顯示新的加載狀態，以免卡頓和過於頻繁的更新。

一樣，從研究中咱們知道，懸停和文本輸入之類的交互須要在很短的時間內處理完畢，而單擊和頁面跳轉在讓用戶感到卡頓以前能夠等待更長的時間。併發模式在內部使用的不一樣「優先級」大體對應於人類感知研究中的交互類別。

專一於用戶體驗的團隊有時會經過一次性解決方案來處理相似的問題。但這些解決方案很難維護，所以很難長久。併發模式的目標是將 UI 研究的成果歸入抽象自己，並提供符合習慣的方式來使用它們。做爲一個 UI 庫，React 能夠很好地作到這一點。

下一步

如今你知道了什麼是併發模式！

下面的這些文檔提供了有關特定主題的更多詳細信息：

• 爲數據獲取掛起——描述了一種在 React 組件中獲取數據的新機制。https://reactjs.org/docs/concurrent-mode-suspense.html
• 併發用戶界面模式——展現了一些基於併發模式和掛起模式的用戶界面模式。https://reactjs.org/docs/concurrent-mode-patterns.html
• 採用併發模式——說明了如何在項目中嘗試併發模式。https://reactjs.org/docs/concurrent-mode-adoption.html
• 併發模式 API 參考——實驗版本中可用的新 API 文檔。https://reactjs.org/docs/concurrent-mode-reference.html

原文連接：https://reactjs.org/docs/concurrent-mode-intro.html

 活動推薦

近年來，隨着 jQuery 的落幕，三大框架的割據以及小程序的爆發，大前端的發展也經歷了從靜態頁面到 JavaScript 跨時代的誕生，再從 PC 端到移動端的轉向，以及由依賴後端到先後端分離的架構演變。

騰訊在線教育前端團隊，近年來在大前端技術架構演進方面也有了很多突破，如 Hybird 方案、離線包方案、PWA 結合 *** 方案、以及 RN 動態化方案的落地和執行等。

此次 GMTC 全球大前端技術大會（深圳站）2019，咱們專門請到了 騰訊的前端高級工程師曹海歌，但願能夠從騰訊在線教育前端團隊的實操案例中，深刻了解騰訊爲提高研發效率，進行的前端工程化體系建設過程。掃描下方二維碼或點擊閱讀原文，查看詳情。