了解 React 新 Hooks

React 19 引入了幾個強大的新鉤子，徹底改變了我們在應用程式中處理表單和管理樂觀更新的方式。在本部落格中，我們將探討 useFormStatus、useActionState 和 useOptimistic - 三個使我們的 React 應用程式響應更快且用戶友好的鉤子。

useFormStatus：增強的表單處理

useFormStatus 掛鉤提供有關表單提交的即時信息，使創建響應式且可訪問的表單變得更加容易。讓我們探討一下這個鉤子如何改進 React 18 的表單處理能力。

範例1：基本表單載入狀態

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button disabled>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function SignupForm() {
  return (
    

{ await submitSignupData(formData); }}>

); }

在 React 18 中，您需要使用 useState 手動管理載入狀態。新的 useFormStatus 掛鉤會自動處理此問題，從而減少樣板程式碼。

範例 2：多種表單狀態

function FormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    <div role="status">
      {pending && <span>Submitting via {method}...</span>}
      {!pending && data && <span>Last submission: {new Date().toLocaleString()}</span>}
    </div>
  );
}

function ContactForm() {
  return (
    

{ await submitContactForm(formData); }}>

); }

範例 3：表單驗證狀態

function ValidationStatus() {
  const { pending, validationErrors } = useFormStatus();

  return (
    <div role="alert">
      {validationErrors?.map((error, index) => (
        <p key="{index}" classname="error">{error}</p>
      ))}
    </div>
  );
}

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); }

範例 4：多步驟表單進度

function FormProgress() {
  const { pending, step, totalSteps } = useFormStatus();

  return (
    <div classname="progress-bar">
      <div classname="progress">



<h3>
  
  
  Example 5: File Upload Progress
</h3>



<pre class="brush:php;toolbar:false">function UploadProgress() {
  const { pending, progress } = useFormStatus();

  return (
    <div>
      {pending && progress && (
        <div classname="upload-progress">
          <div classname="progress-bar">



<h2>
  
  
  useActionState: Managing Action Results
</h2>

<p>The useActionState hook provides a way to track the state of form actions and server mutations, making it easier to handle success and error states.</p>

<h3>
  
  
  Example 1: Basic Action State
</h3>



<pre class="brush:php;toolbar:false">function SubmissionStatus() {
  const state = useActionState();

  return (
    <div>
      {state.status === 'success' && <p>Submission successful!</p>}
      {state.status === 'error' && <p>Error: {state.error.message}</p>}
    </div>
  );
}

function CommentForm() {
  return (
    

{ await submitComment(formData); }}>

); }

範例 2：動作歷史記錄

function ActionHistory() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Recent-Actions">Recent Actions</h3>
      <ul>
        {state.history.map((action, index) => (
          <li key="{index}">
            {action.type} - {action.timestamp}
            {action.status === 'error' && ` (Failed: ${action.error.message})`}
          </li>
        ))}
      </ul>
    </div>
  );
}

範例3：重試機制

function RetryableAction() {
  const state = useActionState();

  return (
    <div>
      {state.status === 'error' && (
        <button onclick="{()"> state.retry()}
          disabled={state.retrying}
        >
          {state.retrying ? 'Retrying...' : 'Retry'}
        </button>
      )}
    </div>
  );
}

範例 4：操作佇列

function ActionQueue() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Pending-Actions">Pending Actions</h3>
      {state.queue.map((action, index) => (
        <div key="{index}">
          {action.type} - Queued at {action.queuedAt}
          <button onclick="{()"> action.cancel()}>Cancel</button>
        </div>
      ))}
    </div>
  );
}

範例 5：動作統計

function ActionStats() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Action-Statistics">Action Statistics</h3>
      <p>Success Rate: {state.stats.successRate}%</p>
      <p>Average Duration: {state.stats.avgDuration}ms</p>
      <p>Total Actions: {state.stats.total}</p>
    </div>
  );
}

useOptimistic：流暢的 UI 更新

useOptimistic 掛鉤可以在等待伺服器回應時立即更新 UI，從而創建響應更快的使用者體驗。

範例 1：樂觀的待辦事項列表

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  async function addTodo(formData) {
    const newTodo = {
      id: Date.now(),
      text: formData.get('todo'),
      completed: false
    };

    addOptimisticTodo(newTodo);
    await saveTodo(newTodo);
  }

  return (
    <div>
      <form action="%7BaddTodo%7D">
        <input name="todo">
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key="{todo.id}">{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

範例 2：樂觀點讚按鈕

function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state) => state + 1
  );

  async function handleLike() {
    addOptimisticLike();
    await likePost(postId);
  }

  return (
    <button onclick="{handleLike}">
      {optimisticLikes} Likes
    </button>
  );
}

範例 3：樂觀評論線程

function CommentThread({ postId }) {
  const [comments, setComments] = useState([]);
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );

  async function submitComment(formData) {
    const comment = {
      id: Date.now(),
      text: formData.get('comment'),
      pending: true
    };

    addOptimisticComment(comment);
    await saveComment(postId, comment);
  }

  return (
    <div>
      <form action="%7BsubmitComment%7D">
        <textarea name="comment"></textarea>
        <button type="submit">Comment</button>
      </form>
      {optimisticComments.map(comment => (
        <div key="{comment.id}">



<h3>
  
  
  Example 4: Optimistic Shopping Cart
</h3>



<pre class="brush:php;toolbar:false">function ShoppingCart() {
  const [cart, setCart] = useState([]);
  const [optimisticCart, updateOptimisticCart] = useOptimistic(
    cart,
    (state, update) => {
      const { type, item } = update;
      switch (type) {
        case 'add':
          return [...state, item];
        case 'remove':
          return state.filter(i => i.id !== item.id);
        case 'update':
          return state.map(i => i.id === item.id ? item : i);
        default:
          return state;
      }
    }
  );

  async function updateCart(type, item) {
    updateOptimisticCart({ type, item });
    await saveCart({ type, item });
  }

  return (
    <div>
      {optimisticCart.map(item => (
        <div key="{item.id}">
          {item.name} - ${item.price}
          <button onclick="{()"> updateCart('remove', item)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

範例 5：樂觀用戶設置

function UserSettings() {
  const [settings, setSettings] = useState({});
  const [optimisticSettings, updateOptimisticSetting] = useOptimistic(
    settings,
    (state, update) => ({
      ...state,
      [update.key]: update.value
    })
  );

  async function updateSetting(key, value) {
    updateOptimisticSetting({ key, value });
    await saveSettings({ [key]: value });
  }

  return (
    <div>
      <div>
        <label>
          Theme:
          <select value="{optimisticSettings.theme}" onchange="{e"> updateSetting('theme', e.target.value)}
          >
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          Notifications:
          <input type="checkbox" checked onchange="{e"> updateSetting('notifications', e.target.checked)}
          />
        </label>
      </div>
    </div>
  );
}

在應用程式中使用這些鉤子時，請記住查看官方 React 文件以獲取最新資訊和最佳實踐。

編碼快樂！