警告：本文檔介紹的實驗功能在穩(wěn)定版本中尚不可用。不要在生產(chǎn)應用程序中依賴 React 的實驗性構建。這些功能可能會發(fā)生重大更改，而且直到功能成為 React 的一部分之前這類更改都不會發(fā)出警告。本文檔面向早期使用者和對此感興趣的用戶。如果你不熟悉 React，那就不必為這些功能擔心——它們并非你現(xiàn)在就需要學習的內(nèi)容。本文檔提供了并發(fā)模式（Concurrent Mode）的理論概述。如果需要更具體的介紹，可以查閱文末的附錄。

---

什么是并發(fā)模式？

并發(fā)模式是一組新功能，可以幫助 React 應用程序保持響應狀態(tài)，并適當調(diào)整用戶的設備功能和網(wǎng)絡速度。

這些功能仍處于實驗階段，未來可能會發(fā)生更改。它們還不是穩(wěn)定的 React 版本的一部分，但你可以在實驗版本中嘗試它們。

阻塞與可中斷渲染

為了更好地解釋并發(fā)模式，我們用版本控制來打比方。如果你在一個團隊中工作，你們可能會使用像 Git 這樣的版本控制系統(tǒng)，開發(fā)很多分支。當某個分支完成后，你可以將你的工作合并到主干上，這樣其他人就可以拉取它了。

版本控制系統(tǒng)還沒誕生的時候，開發(fā)工作流程是完全不一樣的——那時沒有分支的概念，如果要編輯某些文件，必須告訴所有人在你完成工作之前不要碰這些文件。你甚至無法與別人同時研究它們——實際上這些文件把你圈住了。

這就是今天包括 React 在內(nèi)的 UI 庫常見的工作機制。一旦它們開始渲染一項更新，或者創(chuàng)建新的 DOM 節(jié)點，并在組件內(nèi)部運行代碼等，它們就不會中斷這項工作。我們將這種方法稱為“阻止渲染”。

在并發(fā)模式下，渲染不會阻塞——它是可中斷的，這改善了用戶體驗。它還可以解鎖以前無法實現(xiàn)的一些新功能。這篇文檔就是對這一新功能的高層次概述。

可中斷渲染

考慮一個可過濾的產(chǎn)品列表。你可能遇到過這種情況，那就是在列表過濾器中輸入過濾條件時，每次按鍵都會出現(xiàn)卡頓。更新產(chǎn)品列表時，某些工作可能是不可避免的，例如創(chuàng)建新的 DOM 節(jié)點或由瀏覽器繪制布局等。但是，我們 何時 以及 如何 執(zhí)行這些任務是問題的關鍵所在。

解決卡頓的一種常見方法是對輸入“消除抖動”。啟用防抖功能后，我們只會在用戶停止輸入 之后 才更新列表。但我們敲鍵盤時，UI 是不會更新的，這很讓人泄氣。或者我們可以“限流”輸入，并以某個給定的頻率上限來更新列表。但在性能較低的設備上我們?nèi)匀粫D。防抖和限流都會帶來不夠理想的用戶體驗。

卡頓的原因很簡單：渲染開始后就不能中斷了，因此瀏覽器無法在鍵盤按下后立即更新文本輸入。無論 UI 庫（例如 React）在基準測試上表現(xiàn)多好，如果它使用阻塞渲染，那么總會有組件中的某些工作造成卡頓，而且通常沒有簡單的解決方案。

并發(fā)模式使渲染可中斷，從而從根本上解除了這一限制。這意味著當用戶按下一個鍵時，React 不需要阻止瀏覽器更新文本輸入。相反，它可以讓瀏覽器繪制輸入的更新，然后繼續(xù) 在內(nèi)存中 渲染更新后的列表。渲染完成后，React 將更新 DOM，更改將反映在屏幕上。

從概念上講，你可以將其視為 React 在“分支”上準備每個更新的過程。就像你可以放棄分支工作或在分支之間切換一樣，“并發(fā)模式”下的 React 可以中斷正在進行的更新以執(zhí)行更重要的任務，然后返回到之前的工作。這種技術可能會讓你想起視頻游戲中的雙重緩沖。

并發(fā)模式技術減少了 UI 中的防抖和限流的需求。由于渲染是可中斷的，因此 React 無需人為地 延遲 工作來避免卡頓。它可以立即開始渲染，但在需要使應用程序保持響應時會中斷這項工作。

指定加載順序

前文提到，并發(fā)模式就好像 React 使用“分支”工作一樣。分支不僅對短期修復有用，而且對長期運行的功能也有意義。有時你可能會開發(fā)某項功能，但可能要花幾周的時間才能使其處于“足夠好的狀態(tài)”以合并入主干。和版本控制相似，渲染也是一個道理。

想象一下，我們正在一個應用程序的兩個頁面之間跳轉(zhuǎn)。有時，我們可能沒加載足夠的代碼和數(shù)據(jù)來在新頁面上向用戶顯示“足夠好”的加載狀態(tài)。跳轉(zhuǎn)到空白頁或顯示一個巨大的處理中的圖標是非常糟心的體驗。但是，獲取必要的代碼和數(shù)據(jù)往往也不會花費太長時間。如果 React 可以在舊頁面上停留更長的時間，并在顯示新頁面之前“跳過”“不良加載狀態(tài)”，效果不就會更好了嗎？

盡管現(xiàn)在這是可以做到的，但具體執(zhí)行起來很麻煩。在并發(fā)模式下，這一功能是內(nèi)置的。React 首先開始在內(nèi)存中準備新頁面，或者正如我們比喻的情況，“在另一個分支上”做準備。因此 React 可以在更新 DOM 之前等待加載更多內(nèi)容。在并發(fā)模式下，我們可以告訴 React 繼續(xù)顯示可完全互動的舊頁面，并在頁面上嵌入加載指示器。當新頁面準備就緒時，React 就可以帶我們跳轉(zhuǎn)過去。

并 發(fā)

回顧一下上面的兩個例子，看看并發(fā)模式如何將它們結合起來。在并發(fā)模式下，React 可以并行處理多個狀態(tài)更新——就像不同的團隊成員使用分支獨立工作一樣：

• 對于受 CPU 影響的更新（例如創(chuàng)建 DOM 節(jié)點和運行組件代碼），并發(fā)意味著更緊急的更新可以“中斷”已經(jīng)開始的渲染。
• 對于受 IO 影響的更新（例如從網(wǎng)絡中獲取代碼或數(shù)據(jù)），并發(fā)意味著 React 甚至可以在所有數(shù)據(jù)到達之前就開始在內(nèi)存中渲染，無需顯示令人討厭的加載中狀態(tài)。

重點在于，你使用React 的方式?jīng)]有變化。組件、props 和狀態(tài)之類的概念本質(zhì)上沒有改變。要更新屏幕時，你就會設置狀態(tài)。

React 使用啟發(fā)式方法來決定更新的“緊急程度”，并允許你使用少量幾行代碼來調(diào)整，以便在每次交互時都獲得所需的用戶體驗。

將研究成果投入生產(chǎn)

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

例如，研究表明，在頁面之間切換時顯示過多的中間加載狀態(tài)會 拖慢 切換速度，所以并發(fā)模式會使用固定的“時間表”顯示新的加載狀態(tài)，以避免卡頓和過于頻繁的更新。

同樣，從研究中我們知道，懸停和文本輸入之類的交互需要在很短的時間內(nèi)處理完畢，而單擊和頁面跳轉(zhuǎn)在讓用戶感到卡頓之前可以等待更長的時間。并發(fā)模式在內(nèi)部使用的不同“優(yōu)先級”大致對應于人類感知研究中的交互類別。

專注于用戶體驗的團隊有時會通過一次性解決方案來處理類似的問題。但這些解決方案很難維護，因此很難長久。并發(fā)模式的目標是將 UI 研究的成果納入抽象本身，并提供符合習慣的方式來使用它們。作為一個 UI 庫，React 可以很好地做到這一點。

下一步

現(xiàn)在你知道了什么是并發(fā)模式！

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

• 為數(shù)據(jù)獲取掛起——描述了一種在 React 組件中獲取數(shù)據(jù)的新機制。https://reactjs.org/docs/concurrent-mode-suspense.html
• 并發(fā)用戶界面模式——展示了一些基于并發(fā)模式和掛起模式的用戶界面模式。https://reactjs.org/docs/concurrent-mode-patterns.html
• 采用并發(fā)模式——說明了如何在項目中嘗試并發(fā)模式。https://reactjs.org/docs/concurrent-mode-adoption.html
• 并發(fā)模式 API 參考——實驗版本中可用的新 API 文檔。https://reactjs.org/docs/concurrent-mode-reference.html

原文鏈接：

Introducing Concurrent Mode (Experimental) – React?reactjs.org

總結

以上是生活随笔為你收集整理的多项目加载顺序修改_React推出并发模式：可中断渲染、指定加载顺序、并行处理多状态...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。