React.JS 18新特性

banq發表於2021-09-11
ReactJS

如果您是React開發人員，那麼您可能已經聽說過React-React 18 Alpha的最新版本。該團隊仍在進行更新，還有很多事情要做，因此在本文中，讓我們看看版本中發生了什麼並將其分解為簡單的內容。
 

1. 自動批處理
React 18 透過預設執行更多批處理來增加開箱即用的效能改進，無需在應用程式或庫程式碼中手動批處理更新。
批處理是 React 將多個狀態更新分組到單個重新渲染中以獲得更好的效能。簡單來說，批處理（分組）意味著將多個狀態更新組合到一個渲染中。每當您使用 setState 更改任何函式內的變數時，React 會收集所有 setState，然後一起執行它們，而不是在每個 setState 上進行渲染。這稱為批處理。

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

這對效能非常有用，因為它避免了不必要的重新渲染。
 

2.服務端渲染
服務端渲染是一種在伺服器端將JS資料渲染成HTML的方式，以節省前端的計算量。在大多數情況下，這會導致更快的初始頁面載入。
React 分 4 個連續步驟執行服務端渲染：

  1. 在伺服器上，為每個元件獲取資料。
  2. 在伺服器上，整個應用程式被渲染為 HTML 併傳送到客戶端。
  3. 在客戶端，獲取整個應用程式的 JavaScript 程式碼。
  4. 在客戶端，JavaScript 將 React 連線到伺服器生成的 HTML，即Hydration。在普通版本中（直到 React 17），SSR 必須先載入整個頁面，然後才能開始對頁面進行保溼。

這在 React18 中發生了變化，現在我們可以使用將 React 元件分解成更小的塊 .
 

3.流式 HTML
透過將元件包裝其中：

<Suspense fallback={<Spinner />}>
  {children}
</Suspense>


我們告訴 React 它不需要等待為頁面的其餘部分流式傳輸 HTML，這時React 將傳送佔位符（一個spinner）。
當資料在伺服器上準備好時，React 會將額外的 HTML 傳送到同一個流中，以及一個最小的內聯指令碼標籤，以將該 HTML 放在“正確的位置”。
  

4. 選擇性的Hydration
在 React 18 之前，如果應用程式的完整 JavaScript 程式碼尚未載入，則 hydration 無法啟動。對於較大的應用程式，此過程可能需要一段時間。
讓您可以在載入子元件之前為應用程式新增hydration 。
透過將元件包裝在其中，您可以告訴 React，它們不應該阻止頁面的其餘部分進行流式傳輸——甚至是hydration 。這意味著您不再需要等待所有程式碼載入完畢才能開始hydrating。React 可以在載入部件時對其進行hydrate 。
   
總結總結一下，React 18 帶來的特性是：

  1. 使用 Transition API 進行併發控制，
  2. 自動批處理函式呼叫和事件以提高應用程式內效能，以及
  3. 使用 Suspense 為 SSR 載入更快的頁面。


 

相關文章