リアクト19

React 19 の新機能

REACT 19 の新機能

1. リアクトコンパイラ

新機能

• React は手動介入なしで自動的にレンダリングを最適化します。

• useMemo()、useCallBack()、React.memo

はもう必要ありません。

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

• 開発者にとって手動の最適化は面倒でした。

• React は状態の変更とロジックの再レンダリングを自動的に処理するようになりました。

メリット

• React は、何をいつ再レンダリングするかを決定します。

• 開発者の労力を軽減します。

• よりクリーンでシンプルなコードベース。

• 現在、Instagram の運用を強化しています。

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

新機能

• クライアントではなくサーバー上で実行されるコンポーネント。

• 以前は Next.js によって開発されました (V13 のデフォルト)。

• React 19 では、サーバー コンポーネントはネイティブに統合されています。

メリット

• SEO フレンドリー: 検索エンジンの最適化を強化します。

• パフォーマンスの向上: 最初のページの読み込みが速くなります。

• サーバー側実行: API 呼び出しなどのタスクを効率的に処理します。

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

1. クライアント側 (デフォルト): すべての React コンポーネントはクライアント側で実行されます。

2. サーバー側: コンポーネントの最初の行として「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 サイトの他の関連記事を参照してください。