今天我們要來聊聊 React 生態系中的兩個實用的套件：React Query 和 React Hook Form。

React Query：

React Query 是一個用於管理伺服器狀態的強大工具。它可以幫助你輕鬆處理資料獲取、快取和更新等操作。

React Query 的主要特點：

1. 自動快取和重新獲取：自動管理資料的快取和更新。
2. 背景更新：在背景中自動更新資料，保持UI的即時性。
3. 分頁和無限捲動支援：輕鬆實現分頁和無限捲動功能。
4. 樂觀更新：在伺服器響應之前，先更新UI，提升使用者體驗。

來看個簡單的例子：

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json());
}

function PostList() {
  const { data, isLoading, error } = useQuery('posts', fetchPosts);

  if (isLoading) return <div>載入中...</div>;
  if (error) return <div>哎呀！出錯了</div>;

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

在這個例子中，React Query 幫我們處理了載入狀態、錯誤處理和資料快取。簡單幾行程式碼，就可以實現了一個功能完整的資料獲取邏輯。

React Hook Form：

React Hook Form 是一個用於處理表單的輕量級函式庫。它使用 React Hooks 的力量，讓表單處理變得簡單。

React Hook Form 的主要特點：

1. 效能優化：最小化重新渲染，提升表單效能。
2. 易於使用：API 簡單直觀，學習曲線平緩。
3. 靈活的驗證：支援多種驗證方式，包括自定義驗證。
4. 無依賴：輕量級，不依賴其他函式庫。

來看個實際的例子：

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

interface FormData {
  username: string;
  email: string;
  password: string;
}

function SignUpForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
    // 這裡可以處理表單提交邏輯
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username", { required: "使用者名稱是必填的" })} placeholder="使用者名稱" />
      {errors.username && <span>{errors.username.message}</span>}

      <input {...register("email", { required: "電子郵件是必填的", pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: "無效的電子郵件地址"
      }})} placeholder="電子郵件" />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="password" {...register("password", { required: "密碼是必填的", minLength: {
        value: 8,
        message: "密碼至少需要8個字元"
      }})} placeholder="密碼" />
      {errors.password && <span>{errors.password.message}</span>}

      <button type="submit">註冊</button>
    </form>
  );
}

在這個例子中，React Hook Form 幫我們處理了表單的狀態管理、驗證和提交。它的 API 非常直觀，讓表單處理變得很輕鬆。

這兩個套件如何改善我們的開發體驗？

1. React Query：

   • 減少了手動管理資料獲取狀態的麻煩。
   • 自動處理快取，提升應用程式效能。
   • 提供了強大的工具來處理複雜的資料獲取場景。

2. React Hook Form：

   • 簡化了表單處理邏輯，減少樣板程式碼。
   • 提升表單效能，減少不必要的重新渲染。
   • 內建強大的驗證功能，節省了大量自行實作的時間。

小結

今天我們嘗試了 React 生態系中的兩個好用的工具：React Query 和 React Hook Form。這兩個套件分別解決了資料獲取和表單處理這兩個常見的開發痛點。

如果想更了解這兩個套件，可以參考它們的官方文件：

• React Query 官方文件
• React Hook Form 官方文件