#Session 1 The Future of React: 18 and Beyond

歡迎來到 JSDC 2021 共筆

共筆入口：https://hackmd.io/@JSDC-tw/2021conference
手機版請點選上方 按鈕展開議程列表。

共筆協作，共享知識，打造開放社群。

Welcome to JSDC 2021 Collaborative Writing

Collaborative Writing Workplace：https://hackmd.io/@JSDC-tw/2021conference
Using mobile please tap to unfold the agenda.

Build a community with open collaboration.

從這開始
可以直接打字做共筆囉

開場

因為疫情，改線上
過去，現在，未來

正式文章

C.T Lin - Full-stack JavaScript 開發者

Suspense

What is Suspense

• 初登場於 React 16.6

<ErrorBoundary>
    <Suspense fallback={<Spining />}>
    </Suspense>
</ErrorBoundary>

• 機制：Promise
  • Promise 是狀態機 Pending -> Fulfill or Reject
  • React's Suspense
    • 一開始是 Pending
      • 這個時候傳 Fallback
    • Fulfilled 之後傳 children

Streaming Suspense SSR

• before was Waterfall
• React 18: SSR works
• HTTP 分 chunk 傳輸
  • Inline Script

Selective Hydration

Hydration: 前端內容送達後，讓 React 重新掌控的過程

• 17: 無法處理 Interaction
• 18: 用 inline script

Concurrent Mode → Features

Transition

解決問題

遇到複雜情況時（圖片），可能會造成卡死

範例網站：ADORA3, 源自 React 官方

startTransition

import { startTransition } from 'react';

// high priority
// Show What was typed
setInputValue(input);

startTransition(() => {
    // low priority
    // Show the results
    setSearchQuery(input);
})

將工作分到另一個分支

中間狀態 (isPending)

const [isPending, startTransition] = useTransition();

<SuspenseList>

• Before 圖片載入慢，且不同步
• After: revealOrder 可以控制顯示順序

<SuspenseList revealOrder="forward" />

Data fetching

• Lifecycle 一致
• 推出不容易
  • 還需要一段時間
• 會在之後的 React 18.x 推出

Server Components

• Next.js 12 有提供相關的實作
• 實驗中

Co-locate - 讓測試與 Style 緊貼 Component

在 Server 一次處理完！

• 以前：Server (Data) -> Client (React -> Render)
• 現在：Server (Data -> React) -> Client (Render)
• Component 在 Server 上，把查詢做完

Advantage

• 可以減少 bundle size
  • 明顯減少 30% bundle size
    
• 可以接觸 File system
  • 防止越權存取
• 更早載入的自動 Code Splitting
  

Disadvantage

• 非同步得依循 React 的做法