React 併發功能體驗-前端的併發模式已經到來。

時間 2021-07-01

標籤 css html 前端 react 程序員 npm canvas 後端緩存網絡欄目 React 简体版

原文原文鏈接

React 是一個開源 JavaScript 庫，開發人員使用它來建立基於 Web 和移動的應用程序，而且支持構建交互式用戶界面和 UI 組件。React 是由 Facebook 軟件工程師 Jordan Walke 建立，React 的第一個版本在七年前問世，如今，Facebook 負責維護。React框架自首次發佈以來，React 的受歡迎程度直線飆升，熱度不減。
2020 年 10 月，React 17 發佈了，但使人驚訝的是——「零新功能」。固然，這並非真的表示沒有任何新添加的功能，讓廣大程序員使用者興奮。事實上，這個版本爲咱們帶來了不少重大功能的升級及16版本的bug修復，並推出了：Concurrent Mode 和Suspense。
雖然這兩個功能還沒有正式發佈，這些功能已提供給開發人員進行測試。一旦發佈，它們將改變 React 呈現其 UI 的方式，從而達到雙倍提升性能和用戶體驗。css

簡要說明， Concurrent Mode 和Suspense 可使用戶無縫處理數據加載，加載狀態，用戶界面操做更加平滑和無縫切換。在Concurrent Mode 下，React能夠暫停高消耗的，非緊急的組件的渲染，並聚焦在更加緊迫的任務處理，如UI 渲染，始終保持應用爲可響應式，避免白屏，卡頓等現象。html

本文主要分享深刻了解Concurrent Mode 和Suspense 模式下的數據提取功能。前端

爲何須要 Concurrent Mode？

衆所周知，JavaScript 框架或庫是單線程的工做。所以，當一個代碼塊運行時，其他的塊必須等待執行。沒法併發執行多線程工做。界面渲染也是同樣的。
一旦 React 開始渲染某些東西，沒法中斷直到運行完成。React 開發人員將這種渲染稱爲「阻塞渲染」。這種阻塞渲染會建立一個不穩定的用戶界面，而且隨時可能中止響應。react

具體問題

假如，咱們須要顯示一個很長的可選列表用於過濾產品的應用程序。咱們使用搜索框用於過濾記錄，設計方案是當用戶點擊搜索按鈕後，用戶界面須要從新刷新列出相關聯的數據。程序員

若是列表過長，數據過多，UI「卡頓」，即渲染對用戶可見。這種卡頓也會大大下降產品性能。開發人員可使用一些技術，如節流和防抖，這些技術會有必定幫助，但不是完美的解決方案。
節流限制特定函數被調用的次數。使用節流，咱們能夠避免重複調用昂貴和耗時的API或函數。這個過程可以提升性能，尤爲是在用戶界面上呈現信息。npm

防抖會在預約的時間內忽略對函數的調用。函數調用僅在通過預約時間後進行。canvas

下圖描述了卡頓現象：
在等待非緊急 API 調用完成時，UI 卡頓，從而阻止呈現用戶界面。解決方案是使用併發模式進行可中斷渲染。後端

無中斷渲染

經過可中斷渲染，React.js 在處理和從新渲染列表時不會阻塞 UI。它經過暫停瑣碎的工做、更新 DOM 並確保 UI 不會卡頓，使 React.js 更加細化。React 使用用戶輸入並行更新或重繪輸入框。React 使用用戶輸入並重繪輸入框並行執行。它還更新內存中的列表。React 完成更新後，它會更新 DOM 並在用戶的顯示器上從新呈現列表。本質上，無中斷渲染使 React 可以「多任務」。此功能提供了更流暢的 UI 體驗。緩存

併發模式

併發模式是一組功能，可幫助 React 應用程序保持響應並平滑地適應用戶的設備和網絡速度能力。併發模式將其擁有的任務劃分爲更小的塊。 React 的調度程序能夠挑選並選擇要執行的做業。做業的調度取決於它們的優先級。經過對任務進行優先級排序，它能夠中止瑣碎或不緊急的事情，或者進一步推進它們。 React 始終將用戶界面更新和渲染放在首位。網絡

使用併發模式，咱們能夠：

控制首次渲染過程
優先處理渲染過程
暫停和恢復組件的渲染
緩存和優化組件的運行時渲染
隱藏顯示內容直到須要展現時

隨着 UI 渲染，併發模式改進了對傳入數據的響應，懶加載控件，異步處理過程。併發模式保證了用戶界面始終處於激活狀態，而且持續在後臺更新數據，併發模式也始終使用React 的兩個鉤掛：useTransition 和useDeferredValue

使用useDeferredValue Hook

useDeferredValue Hook 的定義以下：

const deferredValue = useDeferredValue(value, { timeoutMs: <some value> });

此命令設置值在 timeoutMs 中設置的時間後「滯後」。用戶界面是必須當即更新仍是必須等待數據，該命令使用戶界面保持激活狀態和響應性，該Hook避免了 UI 卡頓，並始終保持用戶界面響應，以保持獲取數據滯後的較小成本。

使用 Transition Hook

useTransition Hook 是React 中主要用於掛起的Hook，假設這樣的場景下：其中有一個帶有用戶名按鈕的網頁。只需點擊一個按鈕，網頁就會在屏幕上顯示用戶的詳細信息。
假設用戶首先單擊一個按鈕，而後單擊下一個。屏幕要麼變成空白，要麼咱們在屏幕上看到一個微調器。若是獲取詳細信息花費的時間太長，用戶界面可能會凍結。
useTransition 方法返回兩個Hook的值：startTransition 和 isPending。定義的語法以下：

const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

startTransition 定義的語法：

<button disabled={isPending}  
  startTransition(() => {  
        <fetch Calls>  
  });  
  </button>  
  {isPending? " Loading...": null}

使用 useTransition 鉤子，React.js 繼續顯示沒有用戶詳細信息的用戶界面，直到用戶詳細信息準備好，但 UI 是響應式的。React 優先考慮用戶界面，以在並行獲取數據時保持響應。

爲獲取數據的Suspense

Suspense 是React與併發模式一塊兒引入的另外一個實驗性功能。Suspense使組件可以在渲染前等待一段預約的時間。
Suspense的主要做用是從組件異步讀取數據，而無需擔憂數據的來源。Suspense最適合延遲加載的概念。Suspense容許數據獲取庫通知React數據組件是否可使用。在必要的組件準備就緒以前，React不會更新 UI。

使用Suspense的好處：

1.數據獲取庫和React組件之間的集成

2.控制視覺加載狀態

3.避免競爭條件

Spinner組件的基本語法以下：

import Spinner from './Spinner';  
    <Suspense fallback={<Spinner />}>  
      <SomeComponent />  
</Suspense>

Concurrent Mode中使用的Suspense容許耗時的組件在等待數據的同時開始渲染。同時顯示佔位符。這種組合產生了更流暢的UI體驗。

Suspense 和懶加載組件

React.lazy是一個新功能，它使React.js可以延遲加載組件。懶加載意味着僅在須要時才加載組件（檢索和呈現它們的代碼）。他們會優先考慮最關鍵的用戶界面組件。React開發人員建議將懶加載組件包裝在Suspense組件中。
這樣作可確保組件在渲染時不會出現「不良狀態」。用戶界面在整個過程當中保持響應，並帶來更流暢的用戶體驗。

啓用併發模式

要啓用併發模式，請安裝最新的測試版本。安裝 React 的先決條件是節點數據包管理器 (npm)。要安裝測試版本，請執行如下命令：

npm install react@experimental react-dom@experimental

要測試是否設置了測試版本，請建立一個示例 React 應用程序。沒有測試功能的渲染代碼以下：

import * as React from 'react';  
  import { render } from 'react-dom';  
  render(<App />, document.getElementById('root'));

併發模式的，具體代碼以下：

import * as React from 'react';  
    import { createRoot } from 'react-dom';  
createRoot(document.getElementById('root')).render(<App />);

這將爲整個應用程序啓用併發模式。React 將渲染調用分爲兩部分：

建立根元素
使用渲染調用

目前，React 計劃維護三種模式：

傳統模式是向後兼容的傳統或當前模式
阻塞模式是併發模式開發的中間階段
併發模式

阻塞模式是使用createBlockingRoot 調用來替換createRoot 調用，在併發模式的開發狀況下，阻塞模式爲開發者提供了機會來修復bug或解決問題。

React 官方文檔中也說明了每種模式支持的功能：

示例應用：

本文也建立了一個測試程序來驗證併發模式和其餘模式的用法和效果。本文以像素應用爲例在150*150的畫布上隨機分佈像素幷包含一個搜索框，每次用戶點擊搜索框時候，畫布會從新渲染本身。
即便UI 界面沒法在併發模式下渲染，用戶輸入也不會中止更新。像素畫布在處理完成後從新渲染。在傳統模式下，快速鍵入時，UI 會中止，有時會在再次渲染畫布以前中止。用戶輸入也會中止而且不會更新。

構建像素應用程序的主要文件是 canvas.js。咱們還製做了一個輸入框，用戶能夠在其中輸入任何內容。每次按下一個鍵都會從新渲染像素畫布。

代碼示例：

Index.js

import React from "react";  
    import ReactDOM from "react-dom";  
    import App from "./App";  
    // Traditional or non-Concurrent Mode react  
    const rootTraditional = document.getElementById("root");  
    ReactDOM.render(<App caption="Traditional or Block Rendering" />,  
    rootTraditional);  
    // Concurrent Mode enabled  
    const rootConcurrent = document.getElementById("root-concurrent");  
    ReactDOM.createRoot(rootConcurrent).render(<App caption="Interruptible  
Rendering"   />);

App.js

import React, { useState, useDeferredValue } from "react";  
  import "./App.css";  
  import { Canvas } from "./Canvas";  
  export default function App(props)  
  { const [value, setValue] = useState("");  

 //This is available only in the Concurrent mode.

    const deferredValue = useDeferredValue(value, {  
      timeoutMs: 5000  
    });  

    const keyPressHandler = e => {  
      setValue(e.target.value);  
    };  

    return (  
      <div className="App">  
        <h1>{props.caption}</h1>  
        <input onKeyUp={keyPressHandler} />  
        <Canvas value={deferredValue} />  
      </div>  
    );  
  }

Canvas.js

import React from "react";  
   const CANVAS_SIZE = 70;  
   const generateRandomColor = () => {  
    var letters = "0123456789ABCDEF";  
    var color = "#";  
    for (var i = 0; i < 6; i++) {  
      color += letters[Math.floor(Math.random() * 16)];  
    }  
    return color;  
  };  
   const createCanvas = (rows, columns) => {  
    let array = [];  
    for (let i = 0; i < rows; i++) {  
      let row = [];  
      for (let j = 0; j < columns; j++) {  
        row.push(0);  
      }  
      array.push(row);  
    }  
    return array;  
  };  
   //This is the square with the pixels  
  const drawCanvas = value => {  
    const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE);  
    return canvas.map((row, rowIndex) => {  
      let cellsArrJSX = row.map((cell, cellIndex) => {  
        let key = rowIndex + "-" + cellIndex;  
        return (  
         <div  
            style={{ backgroundColor: generateRandomColor() }}  
            className="cell"  
            key={"cell-" + key}  
          />  
        );  
      });  
      return (  
        <div key={"row-" + rowIndex} className="canvas-row">  
          {cellsArrJSX}  
        </div>  
      );  
    });  
  };  
  export const Canvas = ({ value }) => {  
    return (  
     <div>  
        <h2 style={{ minHeight: 30 }}>{value}</h2>  
       <div className="canvas">{drawCanvas(value)}</div>  
     </div>  
   );  
 };

Index.html

<!DOCTYPE html>  
  <html lang="en">  
    <head>  
      <meta charset="utf-8" />  
      <meta  
        name="viewport"  
        content="width=device-width, initial-scale=1, shrink-to-fit=no"  
      />  
      <meta name="theme-color" content="#000000" />  
      <title>React App Concurrent Mode</title>  
    </head>  
    <body>  
      <noscript>  
     You need to enable JavaScript to run this app.  
      </noscript>  
      <div id="container">  
        <div id="root" class="column"></div>  
        <div id="root-concurrent" class="column"></div>  
      </div>  
    </body>  
  </html>

運行示例

讓咱們看看咱們的代碼。咱們看到的第一個屏幕是初始屏幕。使用傳統或塊渲染是如今React 的作法。可中斷渲染是併發模式的測試功能。咱們先看看傳統的渲染工做。

像素畫布在每次擊鍵時從新渲染。在傳統渲染中，整個 UI 會在每次擊鍵時暫停，直到它能夠從新渲染屏幕。在此期間，即便咱們繼續打字，用戶輸入不會更新。

下圖顯示可中斷渲染。在可中斷渲染中，用戶能夠繼續輸入。在爲每次擊鍵並行從新渲染畫布時，UI 不會中止或中止。

從新渲染完成後，React 會更新 UI。雖然在靜態截圖中很難看到，但咱們能夠看到網格在變化，但用戶仍然能夠打字而不會出現 UI 卡頓的狀況。

總結

在本文中，咱們研究了 React 的測試併發功能和 Suspense。使用併發模式，React.js 始終保持用戶界面響應。它將應用程序的任務分解爲更小的塊，並容許對用戶界面任務進行優先級排序。所以，此模式可提供更流暢和無縫的用戶體驗，並提升應用程序的總體性能。

結合併發模式，Suspense 容許用戶界面保持響應。同時，數據獲取等繁重耗時的任務能夠並行完成，從而提供總體無縫體驗。

有關併發模式的完整詳細信息可在 React 官方文檔中瞭解。

隨着React版本的改進， React框架愈來愈被更多的中國前端開發者所熟知而且普遍應用到他們的項目開發中。是繼續Vue.js 後又一備受歡迎的前端主流框架，如今也所以衍生除了不少支持與React框架集成的功能工具，如前端報表ActiveReportsJS控件、SpreadJS 純前端報表控件等，提供了與 React 直接集成的在線編輯器和報表設計工具，完善前端的數據展現功能。

SpreadJS 純前端表格控件

SpreadJS 是一款基於 HTML5 的純前端表格控件，能夠以原生的方式嵌入各種應用，並與先後端技術框架相結合。將 SpreadJS 與 React 集成，可在 React 框架中實現相似 Excel 的電子表格功能，包括支持 450 多種計算公式、在線導入導出 Excel 文檔、數據透視表和多種數據可視化效果，使應用程序具有極高的數據處理性能和響應速度。