React 安定版リリース: 新機能とアップグレード方法

React 19 は正式に安定しており、npm で利用できるようになりました。機能と拡張機能が満載されており、開発を合理化し、パフォーマンスを向上させ、一般的な UI パターンの処理を簡素化するように設計されています。ここでは、React 19 の新機能と、これらの機能をプロジェクトに導入する方法について包括的に説明します。

React 19 での主な追加

1. アクションと非同期遷移

アクションにより、データの変更、保留状態、エラー処理、オプティミスティック更新などの非同期操作の管理が簡素化されます。 useTransition または新しい useActionState フックを使用すると、次のことが可能になります。

保留状態を自動的に処理します。

より適切なエラー処理を提供します。

action または formAction プロパティを使用して、

要素でフォームの送信を管理します。

例: useActionState を使用した簡略化されたフォーム

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

1. useOptimistic を使用したオプティミスティック更新

新しい useOptimistic フックを使用すると、非同期応答を待機している間にユーザーに即時フィードバックを提供できます。

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <input type="text" name="name" />
    </form>
  );
}

1. API を使用する

API を使用すると、Promise とコンテキストの条件付きレンダリングが可能になり、より柔軟なコンポーネント設計が可能になります。

import { use } from 'react';
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

1. ネイティブメタデータ管理

React 19 は、コンポーネント内で

、 、およびタグを直接レンダリングし、それらをセクションに自動的にホイスティングすることをサポートしています。

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="author" content="Author Name" />
    </article>
  );
}

1. 強化されたスタイルシートとスクリプト管理

React 19 では、以下の組み込みサポートが導入されています。

.

を使用して優先順位が制御されたスタイルシート

コンポーネント ツリー内で非同期スクリプトがレンダリングされ、重複排除と正しい実行順序が保証されます。

<link rel="stylesheet" href="styles.css" precedence="default" />
<script async src="script.js"></script>

1. サーバーのコンポーネントとアクション

React サーバー コンポーネントが安定し、事前にコンポーネントをレンダリングできるようになりました。サーバー アクション (「use server」ディレクティブによって有効化) と組み合わせると、クライアント コンポーネントは非同期サーバー側関数をシームレスに呼び出すことができます。

1. エラー処理の改善

React 19 はエラー レポートを統合し、簡潔で実用的なエラー メッセージを提供します。開発者は、onCaughtError、onUncaughtError、および onRecoverableError を使用して詳細なエラー処理を行うことができるようになりました。

1. プロップとして参照

関数コンポーネントは ref を prop として受け入れることができるようになり、forwardRef の必要性がなくなることでコードが簡素化されます。

1. ハイドレーションとサードパーティの統合

React 19 は、ブラウザ拡張機能やサードパーティのスクリプトによって挿入された予期しない要素を適切に処理することにより、ハイドレーションを向上させます。

1. リソースのプリロード

preload や preinit などのリソースのプリロード API を使用してパフォーマンスを最適化します:

import { preload, preinit } from 'react-dom';
preinit('script.js', { as: 'script' });
preload('font.woff', { as: 'font' });

アップグレード方法

詳しい手順については、React 19 アップグレード ガイド (https://react.dev/blog/2024/12/05/react-19) に従ってください。主な考慮事項は次のとおりです:

重大な変更 (ガイドに記載)。

アプリの互換性をテストします。

React をピア依存関係として使用する依存関係を更新します。

今すぐ始めましょう

npm 経由でプロジェクトを React 19 にアップグレードします:

npm install 反応@19 反応-dom@19

これらの新機能とベスト プラクティスについてのより深い洞察については、React 19 の公式ドキュメント (https://react.dev/blog/2024/12/05/react-19) を参照してください。

React 19 は飛躍的な進歩を表し、動的でパフォーマンスが高く、アクセスしやすいアプリケーションを作成するための強力なツールを開発者に提供します。今日から探検を始めましょう!

以上がReact 安定版リリース: 新機能とアップグレード方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。