React 技術選型

使用 React 完成真實世界中的複雜應用，主要需要評估的技術選型如下

• 專案的 CSS 選擇方案
• 專案會使用到的 React Hooks，除了官方或客製，也可以引入 3rd Party Hooks Library
• 更幫助專案容易開發的 3rd Party Library
• 專案的狀態管理選擇方案
• 依據專案類型，選擇使用 React 為基底的整合型 Framework

專案的 CSS 選擇方案

之前在 Day 27 React 的 CSS 解決方案，已經有詳細介紹過各種方案，除了 namespace 的方案，基本上都可以依專案的需求做選擇。

想要複雜又有彈性的架構，個人還是推薦使用 utility css framework 的方式。

React Hooks

官方的 Hooks 已能滿足基本的需求，也可以組合官方提供的 Hooks，成為客製化的 Hooks 滿足專案的延伸需求。

若有些 Custom Hooks 是經常被應用的功能，也有 3rd Party 提供的 Hooks 可以使用。

SWR：React Hooks for Data Fetching

網站：https://swr.vercel.app/

useSWR Hooks 是請求 API 資料的一種解決方案，SWR 是 stale-while-revalidate 的簡稱 - 當抓取資料的時候，可先拿到 cache 裡 stale(舊資料)，然後背景去發請求抓取資料 (revalidate)，再回傳最新的資料。SWR 是一個提供抓取資料功能的 React Hooks Library。

當 fetch 的網址沒有變更，就會先使用 cache，避免重複發請求。

import useSWR from 'swr';
const fetcher = url => fetch(url).then(res => res.json());

function SomeComponent() {
  const { data, error } = useSWR('/api/xxx', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

react-use

網站：https://github.com/streamich/react-use

這套 Library 已經搜集網羅了很多客製化 Hooks，你可以拿來使用，又或者在其基礎上再擴增功能。它主要分成九大類的 Hooks。

• Sensors 與感測相關 - useScroll，useMouseWheel、useWindowSize 等等。
• UI 與UI操作有關 - useSlider、useFullscreen、useVideo 等等。
• Animations 與動畫有關 - useRaf、useTimeout 等等。
• Side-effects 與副作用有關 - useCookie、useLocalStorage、useSessionStorage 等等。
• Lifecycles 與生命週期有關 - useMount、useEffectOnce 等等。
• State 與狀態有關 - useLatest、usePrevious 等等。
• 其他 Miscellaneous - useEnsuredForwardedRef 等等。

其官網介紹上可以完整的看到每個 Hooks 的功能及回傳結果，可依需求使用。

awesome-react-hooks

這個網址會定期整理 React Hooks 相關資源

https://github.com/rehooks/awesome-react-hooks

3rd Party Libraries and Utilities

react-hook-form

網站：https://react-hook-form.com/

如果應用程式中常常需要讓使用者填寫表單，就會經常遇到各種表單的控管問題，比如檢核(validation)、表單狀態控制(isDirty、submitting)等。react-hook-form 提供了一個簡單易用的介面，在建立多個或者複雜表單時會很有用。

API 參考：https://react-hook-form.com/api/

• 使用 useForm 取得專案需要操作的表單函式及資訊。

import { useForm } from "react-hook-form";
const { register, handleSubmit, formState: { errors } } = useForm();

• register

register 是用來註冊 input 元素，當加入 register 之後，就可以讓此 input 的值被加入驗證和送出。

<input {...register("account", { required: { value: true, message: "此欄位必填" } })} />
{errors.account && <span>此欄位必填</span>}

• 快速開始

import React from 'react';
import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit, errors } = useForm(); // initialise the hook
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register an input */}
      <input name="firstname" ref={register} /> 
      <input name="lastname" ref={register({ required: true })} />
      {errors.lastname && 'Last name is required.'}
      <input name="age" ref={register({ pattern: /\d+/ })} />
      {errors.age && 'Please enter number for age.'}
      <input type="submit" />
    </form>
  );
}

immutable 相關套件

JavaScript 物件，一直都是 mutable (可變動的)，但是對於 React State 來說，若 State 物件值是 mutable 就算資料值沒有變動，也會因為其記憶體參考不同，而造成重新渲染。所以我們的操作若是可以保證物件值是 immutable，那就會大幅減少因重新渲染而造成的效能問題。

以下是兩套最常見操作 immutable 函式庫與它們簡單說明:

• immutable: Facebook 出品的老牌的函式庫，有著高人氣和高下載量，就是要針對 React 中的 immutable 結構應用而設計的函式庫，目前仍然是最多下載量與 Github 星數的函式庫。
• immer: 後起之秀，由 Mobx 的創作者所開發，在 Redux Toolkit 內建與 Redux 官方推薦使用後聲勢高漲，語法簡單易於使用是它的最大優點。

狀態管理

React的 狀態管理主要分三類：Local state、Context、Third Party

當專案趨於複雜時，使用 Redux 或是 3rd party tools，將會是比較好的選擇。

使用 Redux 的話，建議可以使用 redux toolkit 來簡化 Redux 操作。

若是 3rd party，可以考慮使用 Zustand 這個簡單又輕量的狀態管理工具。

React Framework

如果你的網站是小型且不需要被公開在搜尋引擎下的應用，那麼就可以單純的使用 React 製作 Client Side Render (CSR)。

Client Side Render - 完整的 HTML 內容不會被 Server 產生出來，Server 收到 Response 時只會回傳一個簡單的 HTML 模板給 Client，後續使用者看到的內容則都是由 Client 端的 JavaScript 所產生。

但是如果你的網站，需要考慮 SEO 的話，就必須要支援 Server Side Rendering (SSR) 或是 Static Side Generation (SSG) 這二種方式，Server 會直接回應完整 HTML 內容給前端。這樣搜尋引擎的爬蟲才能得到完整的資訊，使用者便可透過檢索取得想要公開給使用者的內容。

SSR vs. SSG

SSR 和 SSG 最大的差異是在 HTML 檔案被建立、產生的時間點。

SSR 會在每次收到 Request 時才產生對應的 HTML，因此每次回傳給Client 的 HTML 對 Server 來說都是獨立不同的。適用於需要大量動態產生資料或是資料會經常變動的頁面。

SSG 是在一開始建置就把所有需要用到的頁面都建立出來，在收到 Request 時就直接用相同、一開始就產生好的 HTML 回傳回去。適用於資料不會經常變動的頁面。使用 SSG 的優點就是可以把網頁內容做 CDN Cache，使用者會更快看到顯示的網頁內容，缺點是每次都要花費建置時間。

Gatsby

官網：https://www.gatsbyjs.com/

Gatsby 就是使用 SSG 生成 HTML 的 React Framework，因為 Gatsby 是建置時產生 HTML 內容，所以 Gatsby 建置出來的內容可以在完全沒有 Server 的狀態下運行。

它整合了 React、Webpack 以及 GraphQL，且提供支援多種 CMS 平台設定，如果你的網站的內容不會經常變動，就可以考慮使用 Gatsby 來生成。

Next

官網：https://nextjs.org/

Next 則可以用以建置 SSR 及 SSG 的 React Framework，使用 Next.js 可以輕鬆的建構 SSR，它的 Pages 目錄會自動幫我們生成路由。

如果網站內容很多又更新很頻繁，使用 SSG 會花大量的時間來 Build 專案，選擇 Next 的 SSR 建置最為適合。

Next 非常適用於建置大量用戶及商品內容資料的電商購物交易平台。

ISR 增量靜態再生

在新版本的 Next，提供了結合 SSR 及 SSG 優點的一種 HTML 內容生成方式 - ISR 增量靜態再生 (Incremental Static Regeneratio)。

• A：Build Faster 更快的構建 - 在 Build 時生成最受歡迎的 1,000 種產品。其他產品頁面是有請求再按需產生頁面：1 分鐘構建。
• B：Cache More 更高的緩存命中率 - 在 Build 時生成 10,000 個產品，確保在用戶請求之前緩存更多產品：8 分鐘構建。

學習資源

在學習程式的路上，熟讀官網內容是最必要的工作，但學習的時間有限，還有什麼方式可以幫助我們快速的學習 React 呢？

網站學習

官網 - 英文、中文

從零開始學 ReactJS

React Tutorial｜W3CSchool

好書推薦

React 思考模式: 從 hook 入門到開發實戰

從 Hooks 開始，讓你的網頁 React 起來

在 React 生態圈打滾的一年 feat.TypeScript

教學課程

線上教學 - 布魯斯的 TypeScript + React 全攻略

直播教學 - React 新手讀書會 ｜ 六角學院 (已結束)

實體教學 - React 全攻略 - 入門到進階

結語

這次透過鐵人賽，像是幫自己做了 React 的學習筆記，蠻推薦大家在學習東西的同時，可以透過寫部落格或鐵人賽的方式做技術分享，整理成為自己的學習歷程。

在程式 DEMO 上，使用 CodeSandBox 也相當方便，不需要特別去操作 git repo，也能即時演示當下程式碼的撰寫成果。

謝謝大家 30 天以來的支持，未來也計劃把這 30 天的文章，做為工作上的組內分享報告，或許會有影音說明的支援，到時再把影音側錄成果做為補充放上來。