React 16 Roadmap

一。概覽

從功能上看，React 16 規劃中有 4 個關鍵特性：

• Concurrent Mode

• Hooks

• Suspense

  • for Code Splitting

  • for Data Fetching

  • for SSR

• Modernizing React DOM

其中，Concurrent Mode（之前叫 Async Rendering）無疑是最值得期待的東西，或將引領變革（合作式調度機制可能泛化成為瀏覽器能力）

單從形式上看，Hooks 是對函數式組件的增強，使之能與類組件平起平坐，甚至（期望）取而代之。實質意義在於進一步將更多的函數式思想引入到前端領域，比如 Effect、Monad 等。算是在提出 v = f(d) 的 UI 層函數式思路之後，在這條路上的進一步探索

Suspense 在 Code Splitting 場景已經露過面了，主要貢獻在於用戶體驗與開發體驗上。Data Fetching 的場景類似，在提升開發體驗（統一數據請求及緩存方式）的同時，兼顧用戶體驗（顯示 Loading）。而 SSR 場景下的 Suspense 能力則與前兩種不同，考慮更多的是頁面加載性能與用戶體驗之間的平衡，期望通過服務端渲染與客戶端渲染的配合（Hydration），讓頁面盡快達到真正可用的狀態

Modernizing React DOM 則是一項針對 React DOM（6 年）歷史遺留問題的重構計劃，代號 React Fire，旨在簡化實現並看齊現代瀏覽器 DOM 機制，比如去掉事件系統這層不必要的抽象，因為現代瀏覽器環境下不再需要這些 2013 年的 polyfill 了

二。Concurrent Mode

Concurrent Mode 意味著非阻塞式渲染：

Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread.

P.S.Concurrent Mode 之前叫做 async mode，改名是為了突出與其它異步渲染技術不同，有優先級調度的概念，類似於分時操作系統並發執行多道程序的能力

對於計算密集（CPU-bound）型任務而言，Concurrent Mode 帶來的非阻塞式渲染能力，能在渲染大組件樹的同時，保證應用的交互響應能力（不至於卡死），是React 願景中很大的一塊

具體的，Concurrent Mode 下允許中斷耗時的渲染流程，讓主線程有機會從中解放出來處理更高優的事情：

It is opt-in and allows React to interrupt a long-running render (for example, rendering a new feed story) to handle a high-priority event (for example, text input or hover).

還能配合 Suspense 跳過不必要的 Loading 狀態（網絡足夠快的話，不用再閃個 Loading）：

Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.

並且，Concurrent Mode 特性所依賴的 合作式調度機制，將來可能會由瀏覽器提供原生實現（已經在 與 Chrome 團隊合作 了）

P.S. 關於調度器的更多信息，見 cooperative scheduling

Release 版本

React & React DOM 16.x（未發布）

官方資料

• Andrew's talk

• JSConf Iceland talk

三。Hooks

Hooks ���函數式組件也能擁有狀態、生命週期等 Class 組件特性（如 state, lifecycle, context, ref 等等）：

Hooks let you use features like state and lifecycle from function components.

此外，還提供了一種跨組件複用狀態邏輯的能力，不必再與組件樹結構嵌套關係強耦合：

Hooks let you use features like state and lifecycle from function components. They also let you reuse stateful logic between components without introducing extra nesting in your tree.

例如：

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

這就是函數式組件的「狀態」，context、ref、組件實例變量等都以類似的 Hook 方式提供了支持，因此函數式組件擁有了與 Class 組件幾乎相同的表達力

更進一步地，Hooks 被寄予厚望，期望成為 React 組件的基本形式（作為 Class 組件的替代選項）：

In the longer term, we expect Hooks to be the primary way people write React components. Our goal is for Hooks to cover all use cases for classes as soon as possible.

但是，大費周章地增強函數式組件不只是為了多一種選項，主要作用在於：

• 減少組件樹的嵌套層級

• 複用生命週期邏輯（函數式組件 + Hooks 抽離 Class 組件在類（組件）實例級無法複用的部分）

收益體現在 2 方面：

• 開發體驗

  • 解決組件嵌套 wrapper hell 問題（"wrapper hell" of render props and higher-order components）

  • 複用生命週期中的重複邏輯

• 基礎建設

  • 解決大規模優化上的阻礙（比如內聯組件的編譯難題）

P.S. 注意，提出 Hooks 不是為了廢棄掉 Class，但在 Hooks 廣泛應用之後，可能會把 Class 支持拆分到單獨的 package 裡，以減少 bundle 體積：

Hooks don't deprecate classes. However, if Hooks are successful, it is possible that in a future major release class support might move to a separate package, reducing the default bundle size of React.

Release 版本

React & React DOM v16.8.0

官方資料

• introduction

• overview

• [motivation](https://medium.com/ @dan_abramov/making-sense-of-react-hooks-fdbde8803889)

• API design

• talks

• Hooks in React Native

• FAQ

四。Suspense

Suspense 就是讓 UI 掛起等待別的東西，基本機制是掛起渲染並顯示個降級效果（suspending rendering and showing a fallback）：

Suspense refers to React's new ability to "suspend" rendering while components are waiting for something, and display a loading indicator.

2 個目標：

• 為 Code Splitting、Data Fetching 等場景提供一種方便的編程模型

• 促進並發模式下的用戶體驗

Our longer term vision for Suspense involves letting it handle data fetching too (and integrate with libraries like Apollo). In addition to a convenient programming model, Suspense also provides better user experience in Concurrent Mode.

Suspense for Code Splitting

通過 React.lazy 懶加載組件，從而實現組件（樹）粒度的代碼拆分。例如：

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

P.S. 關於 React 代碼拆分的更多信息，見 React Suspense

Release 版本

React & React DOM v16.6.0

官方資料

• Code Splitting guide

• [practical explanation](https://medium.com/ @pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d)

Suspense for Data Fetching

類似於 Code Splitting，也希望為數據請求的場景提供一種方便的通用方案：

We'd like to provide officially supported ways to use it for data fetching too.

例如讓 UI 等待數據回來，在此期間通過 React.Suspense 顯示 Loading：

// React Cache for simple data fetching (not final API)
import {unstable_createResource} from 'react-cache';

// Tell React Cache how to fetch your data
const TodoResource = unstable_createResource(fetchTodo);

function Todo(props) {
  // Suspends until the data is in the cache
  const todo = TodoResource.read(props.id);
  return <li>{todo.title}</li>;
}

function App() {
  return (
    // Same Suspense component you already use for code splitting
    // would be able to handle data fetching too.
    <React.Suspense fallback={<Spinner />}>
      <ul>
        {/* Siblings fetch in parallel */}
        <Todo id="1" />
        <Todo id="2" />
      </ul>
    </React.Suspense>
  );
}

最終願景是由網絡庫來提供上層封裝，讓大多數數據請求都走 Suspense

react-cache

react-cache 對 Suspense for Data Fetching 設想提供了實驗性的實現

目前尚處於非常不穩定的階段（甚至缺少緩存過期之類的基礎特性），暫時不建議使用。主要原因在於：

• 依賴的一些底層 API 尚未 ready（見 Context.write），導致 API 無法最終確定

• 缺少一些 UI 模式支持（比如組件樹層級無關的 Loading）

但最終會形成一套規範，其它網絡庫（如 Apollo）遵守規範說明即可接入 Suspense 支持：

We'll provide a reference implementation of a basic "React Cache" that's compatible with Suspense, but you can also write your own. Data fetching libraries like Apollo and Relay will be able to integrate with Suspense by following a simple specification that we'll document.

Release 版本

React & React DOM 16.x（未發布）

官方資料

• talk

• small demo

• React Cache

Suspense for Server Rendering

Suspense 同樣能夠配合 SSR，前後端合璧提升頁面加載體驗

具體的，漸進加載，並分塊渲染頁面內容，同時結合 Suspense 特性提升加載中的視覺體驗：

We started designing a new server renderer that supports Suspense (including waiting for asynchronous data on the server without double rendering) and progressively loading and hydrating page content in chunks for best user experience.

P.S. 其中 double rendering 是指前後端渲染結果不一致時（比如前端渲染依賴數據請求），為保證狀態一致，需要丟棄後端渲染結果，前端再次渲染該組件，具體見 Hydration

目前相關消息很少，但確定SSR 大幅重構是 2019 年的重點目標：

The new server renderer is going to be our major focus in 2019, but it's too early to say anything about its release schedule.

Release 版本

不確定

官方資料

• talk

五。Modernizing React DOM

名為 React Fire 的計劃，想要簡化實現（Simplifying）並與現代瀏覽器 DOM 看齊（Modernizing）

目前還在探索階段，具體計劃及進度見 React Fire: Modernizing React DOM

Release 版本

不確定

官方資料

• React Fire: Modernizing React DOM

參考資料

• React 16.x Roadmap

• Tips for server-side rendering with React