React では何が変わったのでしょうか?

開発者は、使用するテクノロジーを常に最新の状態に保つ必要があります。最近、React のバージョン 19 が安定版になりました。この投稿では、バージョン 19 での変更点について説明します。

この投稿は 2 つの部分に分かれており、最初の部分ではバージョン 19 の新機能と React のどの部分が改善されたかについて説明します。ニュースの前に何が改善されたかを見てみましょう。

ref を小道具として与える

ref を小道具として渡すには、forwardRef を使用する必要がありますが、これは冗長になります。そこに書かれたコードは次のようになります:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

ref を props として直接指定できるようになりました

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

ref のクリーンアップ関数

コンポーネントで参照が使用されている場合、コンポーネントが UI からアンマウントされるときに参照をクリアする必要があります。これは、メモリを効率的に管理し、予期しない状況を回避するために重要です。以前のバージョンでは、これは useEffect:
の戻り部分に書かれていました。

function Example() {
    const ref = useRef(null);

    useEffect(() => {
        ref.current = null; // Reset ref if needed
    }, [/* dependencies */]);
}

バージョン 19 での変更後、上記のコードは次のように記述されます:

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

useDeferredValue に初期値を割り当てるオプション

initialValue が指定される理由はすでにわかっているので、次のセクションに進んでください)

メタデータのサポート

meta、title などのメタ要素を目的のページに割り当てるには、useEffect か、react-helmet などのライブラリを使用する必要がありました。

バージョン 19 では、これらのタグを直接使用する機能が追加されました。

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

は、React コンポーネントをレンダリングするときにメタタグを

要素に自動的にラップします。

サポートスタイル

このバージョンではスタイルの最適化にも重点を置き、適切なタイミングでスタイルをダウンロードする機能と precedence 属性を追加しました。この属性は、スタイルが DOM に追加される順序を制御します。スタイルは、依存コンポーネントのマウント前にロードされます。

非同期スクリプトのサポート

スタイルと同様に、非同期スクリプトも必要なときにダウンロードできます。スタイルと非同期スクリプトを読み込むコンポーネントは、最初に読み込まれたときにキャッシュされるため、複数の場所で使用される場合でも再ダウンロードを心配する必要はありません)

リソースのプリロード

リソースをできるだけ早くダウンロードすることは、サイトのパフォーマンスに良い影響を与えます。この機能を活用するための新しい API が React 19 で発表されました。これらは次の

です

preinit - リソース (スクリプトまたはモジュール) をすぐにダウンロードして使用します。
preload - 事前にリソースをダウンロードします。この場合、ロードされたリソース (フォント、スタイル) をすぐに使用する必要はありません
preconnect - リソースをロードするサーバーへの接続を開き、リソースのロード時間を短縮します。
prefetchDNS は、接続を作成せずにリクエストが行われる前にリソースをダウンロードしてキャッシュする点を除いて、preconnect と同様に機能します。

カスタム要素のサポート

React は、カスタム要素が以前のバージョンで使用されていた場合、props を認識しませんでしたが、新しいバージョンからは問題なく使用できるようになりました。カスタム要素の例 -> 。

注 - 一部の場所ではコードを通じて例が提供されていません。ここで例を確認できます

以上がReact では何が変わったのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。