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

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

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

阻塞與可中斷渲染

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

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

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

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

可中斷渲染

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

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

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

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

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

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

指定加載順序

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

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

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

并發(fā)

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

對于受 CPU 影響的更新（例如創(chuàng)建 DOM 節(jié)點(diǎn)和運(yùn)行組件代碼），并發(fā)意味著更緊急的更新可以“中斷”已經(jīng)開始的渲染。

對于受 IO 影響的更新（例如從網(wǎng)絡(luò)中獲取代碼或數(shù)據(jù)），并發(fā)意味著 React 甚至可以在所有數(shù)據(jù)到達(dá)之前就開始在內(nèi)存中渲染，無需顯示令人討厭的加載中狀態(tài)。

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

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

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

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

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

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

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

文章來源：reactjs團(tuán)隊(duì)，譯者：王強(qiáng)；

【數(shù)商云www.zhimaihui.cn】致力于提供企業(yè)級的電商平臺服務(wù)，長期為大中型企業(yè)打造數(shù)據(jù)化、商業(yè)化、智能化的電商網(wǎng)站建設(shè)解決方案，同時(shí)我們還提供B2B交易系統(tǒng)、B2B2C多用戶商城系統(tǒng)、B2C電子商務(wù)系統(tǒng)、跨境進(jìn)口電商平臺、供應(yīng)鏈管理系統(tǒng)、SRM供應(yīng)商管理系統(tǒng)、SCM系統(tǒng)、渠道管理系統(tǒng)等一系列系統(tǒng)定制開發(fā)服務(wù)，通過大數(shù)據(jù)、云計(jì)算等新技術(shù)協(xié)助企業(yè)打造供應(yīng)端—渠道端—營銷端—數(shù)據(jù)端等全鏈數(shù)字化運(yùn)營體系，提升企業(yè)運(yùn)營效益與智慧數(shù)字化商業(yè)轉(zhuǎn)型。