リアクト19-jsチュートリアル-php.cn

リアクト19

Mary-Kate Olsen

リリース： 2025-01-04 03:09:39

オリジナル

117 人が閲覧しました

React 19

React 19 の新機能

REACT 19 の新機能

1. リアクトコンパイラ

新機能

React は手動介入なしで自動的にレンダリングを最適化します。
useMemo()、useCallBack()、React.memo

React コンパイラーを使用する理由

開発者にとって手動の最適化は面倒でした。
React は状態の変更とロジックの再レンダリングを自動的に処理するようになりました。

メリット

React は、何をいつ再レンダリングするかを決定します。
開発者の労力を軽減します。
よりクリーンでシンプルなコードベース。
現在、Instagram の運用を強化しています。

2. サーバーコンポーネント

新機能

クライアントではなくサーバー上で実行されるコンポーネント。
以前は Next.js によって開発されました (V13 のデフォルト)。
React 19 では、サーバーコンポーネントはネイティブに統合されています。

メリット

SEO フレンドリー: 検索エンジンの最適化を強化します。
パフォーマンスの向上: 最初のページの読み込みが速くなります。
サーバー側実行: API 呼び出しなどのタスクを効率的に処理します。

サーバーコンポーネントの使用方法?

クライアント側 (デフォルト): すべての React コンポーネントはクライアント側で実行されます。
サーバー側: コンポーネントの最初の行として「use Server」を追加します:

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

ログイン後にコピー

重要なメモ

サーバーコンポーネントはクライアント上では実行されません。
アクションと組み合わせることで、フォーム処理や API リクエストなどのタスクを合理化します。
Next.js ユーザーはすでにサーバーコンポーネントを活用できます。 React 19 はこれを React に直接もたらします。

3. アクション

React19 より前: 非同期状態の手動処理。

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

ログイン後にコピー

React19 以降: useActionsState を使用してクリーンな非同期処理を行います。

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

ログイン後にコピー

読み込み、エラー、状態の更新を自動的に処理します。

4. 新しいフック

USEACTIONSTATE: フォーム処理

送信状態とフォーム検証を自動的に管理します。

React19 の前:

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

ログイン後にコピー

React19 後:

useActionState はフォームの送信を簡素化します。

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

ログイン後にコピー

USEFORMSTATUS: フォームのステータスを追跡

保留中、成功、エラーなどのフォームの状態にアクセスします。

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

ログイン後にコピー

USEOPTIMISTIC: OPTIMISTIC UI の更新

UX を向上させるために楽観的な更新を簡素化します。

React19 の前:

あなたは UI を楽観的に更新し、元に戻すことも処理しました。

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

ログイン後にコピー

React19 後:

useOptimistic を使用すると宣言的になります。

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

ログイン後にコピー

5.USE()フック

use() とは何ですか?

use() フックは、Promise を直接処理することで、非同期データのフェッチとコンテキストの消費を簡素化します。

React19 より前: useefect の使用

非同期状態の手動処理。

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

ログイン後にコピー

React19 以降: USE() フック

非同期データを直接取得し、Promise を解決します

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

ログイン後にコピー

利点:

useEffect や useState は必要ありません。
よりクリーンでより宣言的なコード。
約束をシームレスに処理します。

6. サーバーコンポーネント

サーバーコンポーネントとは何ですか?

サーバーコンポーネントはサーバー上でレンダリングし、軽量の結果をクライアントに送信して、パフォーマンスを向上させます。

React19 より前: 従来のクライアント - サイドレンダリング

データの取得には useEffect を使用する必要があり、SSR には複雑なツールが必要でした。

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

ログイン後にコピー

React19 後: サーバー - サイドレンダリング

React Server コンポーネントはシームレスに統合されます。

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

ログイン後にコピー

利点:

ページの読み込みが速くなります (重いクライアント側 JS は不要)。
SEO が改善され、バンドルサイズが削減されました。

7. アセット読み込みの強化

React19 では、画像やスクリプトなどのアセットがバックグラウンドで読み込まれる方法が改善されています。

React19 より前:

手動構成が必要でした。

function handleClick() {
 setItems([...items, newItem]);
 saveItem(newItem).catch(() => setItems(items)); // Revert on error
}

ログイン後にコピー

React19 後: ネイティブ遅延読み込み

アセットは介入なしで効率的にロードされるようになりました。

const [optimisticItems, addOptimisticItem] = useOptimistic(items);

function handleClick() {
 addOptimisticItem(newItem);
}

ログイン後にコピー

利点:

ロード時間が短縮されました。
遅延が減少し、ユーザーエクスペリエンスが向上します。

結論

React 19 がもたらすもの:

アクションによる非同期状態管理の簡素化。
useActionState、
useFormStatus と UseOptimistic.
use() フックを使用すると、非同期データを簡単に処理できます。
パフォーマンスを向上させるシームレスなサーバーコンポーネント。
よりクリーンな参照管理と強化されたアセット読み込み。

以上がリアクト19の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。