TypeScript 和 React 18 新手指南 助你提升效能與架構設計

作者:
20241130223506 93

TypeScript + React 18 最佳實踐:效能優化與架構設計

1. TypeScript 基礎概念

1.1 TypeScript 的介紹

TypeScript 是什麼？

TypeScript 是由微軟開發的開源語言，它是 JavaScript 的超集，提供了靜態類型檢查的功能。TypeScript 允許開發者在撰寫代碼時定義變數的類型，這樣可以在編譯期間捕捉到類型錯誤，從而提高代碼的可靠性和可維護性。

TypeScript 的優勢：靜態類型檢查、增強的編輯器支援

  1. 靜態類型檢查：透過靜態類型檢查，開發者可以在編譯期間發現錯誤，而不是在運行時。這樣可以大幅降低因類型錯誤導致的運行時崩潰風險。
  2. 增強的編輯器支援：TypeScript 具有強大的編輯器支持，提供自動補全、重構和即時錯誤檢查等功能，能夠提升開發效率。

1.2 TypeScript 與 JavaScript 的區別

型別系統的不同

  • JavaScript：動態類型語言，變數的類型在運行時確定。
  • TypeScript：靜態類型語言，變數的類型在編譯時確定，開發者可以明確指定變數的類型。

編譯過程與運行時的差異

  • JavaScript：直接在瀏覽器中運行，沒有編譯過程。
  • TypeScript：需要經過 TypeScript 編譯器（tsc）轉換為 JavaScript，然後才能在瀏覽器中運行。

1.3 常見的 TypeScript 特性

接口（Interfaces）與類型（Types）

TypeScript 提供了接口和類型來定義對象的結構。

interface User {
    id: number;
    name: string;
}

const user: User = { id: 1, name: "Alice" };

泛型（Generics）的使用

泛型允許開發者在定義函數或類時不指定具體類型，而是使用佔位符類型，這樣可以提高函數或類的重用性。

function identity<T>(arg: T): T {
    return arg;
}

const output = identity<string>("Hello TypeScript");

2. React 18 新特性

2.1 Concurrent Rendering（並發渲染）

Concurrent Mode 的概念與用途

React 18 引入了 Concurrent Mode，這是一種新的渲染模式，允許 React 在用戶界面渲染過程中進行非阻塞的更新。這意味著 React 可以在等待某些操作的同時，繼續處理其他工作，從而提高應用的響應速度。

影響效能的關鍵因素

  • 優先級管理：React 可以根據不同的任務優先級，自動調整渲染的順序。
  • 時間切片：React 可以將長時間的計算拆分成小塊，這樣就不會阻塞主線程。

2.2 Suspense 和 Lazy Loading

如何使用 Suspense 來優化數據加載

Suspense 允許開發者定義加載狀態，並在數據加載完成之前顯示一個佔位符。

const MyComponent = React.lazy(() => import('./MyComponent'));

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

使用 React.lazy() 進行組件的懶加載

React.lazy() 允許動態加載組件，這樣可以減少初始加載的代碼量，提高應用的加載速度。

2.3 Transition API 的應用

何時使用 Transition

Transition 允許開發者在狀態更新時指定哪些更新是優先級較低的，以便在高優先級的操作完成後再進行更新。

import { startTransition } from 'react';

function handleClick() {
    startTransition(() => {
        // 更新狀態的代碼
    });
}

提升用戶體驗的最佳實踐

  • 在用戶輸入時，使用 Transition API 來延遲一些狀態更新，從而保持界面的流暢性。
  • 適當使用 loading 狀態，使用 Suspense 來顯示過渡效果。

3. 效能優化策略

3.1 減少不必要的渲染

使用 React.memo() 和 PureComponent

React.memo() 和 PureComponent 可以幫助開發者避免不必要的渲染。這些工具會進行淺層比較，只有當 props 發生變化時才重新渲染組件。

const MyComponent = React.memo(function MyComponent(props) {
    return <div>{props.value}</div>;
});

使用 useCallback() 和 useMemo() 優化函數和計算值

  • useCallback 用於緩存函數，避免在每次渲染時都創建新的函數實例。
  • useMemo 用於緩存計算值，避免不必要的計算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

3.2 代碼分割與懶加載

應用 React.lazy() 進行動態加載組件

配合 Suspense，React.lazy() 使得組件的懶加載變得簡單，它可以根據需要加載組件，從而減少初始加載的代碼量。

如何配置 Webpack 進行代碼分割

在 Webpack 中，可以使用 import() 語法來實現代碼分割。Webpack 將自動將被動態導入的模塊分割成單獨的檔案。

const MyComponent = React.lazy(() => import('./MyComponent'));

3.3 使用合適的狀態管理方案

Context API vs Redux

  • Context API：適合小型應用和中等複雜度的狀態管理，使用簡單。
  • Redux：適合大型應用，提供可預測的狀態管理。

如何選擇合適的狀態管理工具

選擇適合的狀態管理工具取決於應用的大小和複雜性，考慮以下幾點：
- 應用的大小和狀態的複雜性。
- 團隊的熟悉度。
- 是否需要中介層來處理副作用。

4. 組件架構設計

4.1 組件的可重用性與組織

單一職責原則（SRP）

每個組件應該只做一件事情，這樣可以提高組件的可重用性和可測試性。

function UserProfile({ user }) {
    return <div>{user.name}</div>;
}

组件的拆分與合併的最佳實踐

在設計組件時，應根據功能或視圖拆分或合併組件，這樣可以提高代碼的可維護性。

4.2 Hooks 的使用

自定義 Hooks 的創建與使用

自定義 Hooks 允許開發者封裝複用邏輯，這樣可以提高代碼的可讀性和可維護性。

function useFetch(url) {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetch(url).then(response => response.json()).then(setData);
    }, [url]);
    return data;
}

使用 Effect Hook 處理副作用

Effect Hook 允許開發者在組件中處理副作用，例如數據請求、訂閱等。

useEffect(() => {
    const subscription = props.source.subscribe();
    return () => {
        subscription.unsubscribe();
    };
}, [props.source]);

4.3 表單管理與驗證

使用 Formik 或 React Hook Form

這些庫提供了簡單的 API 來管理表單狀態和驗證，減少了開發者的工作量。

import { useFormik } from 'formik';

const formik = useFormik({
    initialValues: {
        email: '',
    },
    onSubmit: values => {
        alert(JSON.stringify(values, null, 2));
    },
});

如何進行表單驗證與錯誤處理

使用 Formik 或 React Hook Form 可以輕鬆進行表單驗證，並提供錯誤提示。

const validate = values => {
    const errors = {};
    if (!values.email) {
        errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
        errors.email = 'Invalid email address';
    }
    return errors;
};

5. 測試與調試

5.1 單元測試與集成測試

使用 Jest 和 React Testing Library

Jest 是一個流行的測試框架，React Testing Library 可用於測試 React 組件的行為。

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders learn react link', () => {
    render(<MyComponent />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();
});

測試組件的狀態與行為

測試組件的狀態和行為可以確保組件按預期運作，避免未來的變更引入錯誤。

5.2 TypeScript 的靜態類型檢查

如何撰寫類型安全的測試

使用 TypeScript，可以為測試編寫類型定義，這樣可以在編譯期間捕捉到類型錯誤。

function add(a: number, b: number): number {
    return a + b;
}

test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
});

使用 TypeScript 增強測試的可靠性

透過靜態類型檢查，可以提早發現測試中的潛在錯誤，增加測試的可靠性。

5.3 性能分析工具

使用 React DevTools 進行性能分析

React DevTools 是一個強大的工具，可以幫助開發者分析組件的渲染性能，識別不必要的渲染。

如何識別瓶頸與優化性能

  • 使用 React DevTools 來檢查組件的渲染次數。
  • 透過分析組件樹，找出性能瓶頸。

6. 部署與持續集成

6.1 專案結構與配置

TypeScript 與 React 專案的最佳結構

  • src/：放置所有源代碼。
  • public/：放置公共資源，如 HTML 和圖標。
  • tests/：放置測試代碼。

基本的 tsconfig.json 配置

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "strict": true,
        "jsx": "react",
        "esModuleInterop": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

6.2 使用 CI/CD 工具自動化部署

配置 GitHub Actions 或 Travis CI

這些工具可以自動化測試和部署流程，確保每次變更都經過測試。

name: CI

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - run: npm install
    - run: npm test

自動化測試與部署流程

  • 在每次推送代碼時自動運行測試。
  • 測試通過後自動部署到生產環境。

6.3 性能監控與優化

使用工具如 Lighthouse 監控效能

Lighthouse 是一個開源工具，可以幫助開發者評估應用的性能，並提供優化建議。

持續優化和迭代

  • 定期檢查應用的性能指標。
  • 根據監控結果進行持續優化，確保應用保持高效運行。

結論

結合 TypeScript 和 React 18 開發應用程式時，遵循最佳實踐能夠提升效能與架構設計。透過靜態類型檢查、組件優化、有效的狀態管理、測試與部署策略，我們能夠建立出高效、可維護的應用。希望這篇文章能夠幫助新手開發者快速上手，並在實際開發中受益。

關於作者

Carger
Carger
我是Oscar (卡哥)，前Yahoo Lead Engineer、高智商同好組織Mensa會員，超過十年的工作經驗，服務過Yahoo關鍵字廣告業務部門、電子商務及搜尋部門，喜歡彈吉他玩音樂，也喜歡投資美股、虛擬貨幣，樂於與人分享交流！