新しい React がもたらしたもの - 明確に理解する

React 19 は、2024 年 4 月 25 日にリリースされました。JavaScript の世界は非常に急速に変化するため、追いつくのが大変に感じることがあります。しかし、これらの変更が React 開発者としての生活を楽にすることを目的としているのであれば、検討してみる価値はありますよね? React はこのエコシステムの非常に重要な部分であるため、最新の状態を維持することが必須です。

React 19 の最も優れている点は、物事をよりシンプルにすることに焦点を当てていることです。このアップデートは、React の学習を容易にし、難しいセットアップに取り組む代わりに、作成により多くの時間を費やすことができるように設計されています。新機能の中には、まさにゲームチェンジャーであり、仕事のやり方に大きな変化をもたらす可能性があるものもありますので、絶対に見逃さないでください。

難しい言葉を使わずに、わかりやすく説明することを常に心がけています。この記事も例外ではありません。私の目標は、すべてを明確に理解していただくことです。React 19 の素晴らしいアップデートを一緒に探索しましょう!

React 19 はまだ完全に安定していないことに注意してください。現在は React Canary と呼ばれています。したがって、実際には運用には推奨されないことに注意してください。

React コンパイラ

React アプリケーションを最適化するために、useMemo、useCallback、memo などの組み込みメソッドを使用します。これにより、入力が変更されない場合はコードを再度コンパイルしないように React に指示します。しかし、メモ化の適用を忘れると、React のリソースと計算能力が無駄になってしまいます。これに対処するために、React 19 では React Compiler が導入されました。 React の新しいコンパイラは、第 19 バージョンの新しいリリースの目玉です。新しいコンパイラはコードをバックグラウンドで最適化するため、これらのフックを削除して、美しくクリーンな React コンポーネントの作成に集中できます。

つまり、パフォーマンスを最適化するために関数を useMemo または useCallback でラップする必要はありません。また、コンポーネントの再レンダリングを防ぐためにコンポーネントをメモでラップする必要もありません。

アクション (useTransition フック)

意味不明な話をしましょう?!! React 19 が登場する前に useTransition フックがほとんど言及されていなかったことに気づきましたか?それとも私だけでしょうか？そうですね、少なくとも私は、特にジュニア開発者の間ではそう感じました。とにかく、以前のバージョンでどのように機能したかについて説明し、それがなぜ今それほど重要な機能なのかを見ていきます。

useTransition は、startTransition 関数と isPending ブール値の 2 つの要素を含む配列を返します。状態の更新を startTransition 関数内にラップして、遷移としてマークすることができます (優先度の低いコード)。つまり、startTransition でラップされた部分は、他の連続タスクが完了した後に動作を開始します。

React 18 では、startTransition 関数は非同期関数を直接サポートしていません。 startTransition は更新を低優先度としてマークするように設計されていますが、非同期ロジックをネイティブに処理できないため、これは制限でした。

React 19 では、この制限が解決されました。 startTransition は 非同期関数 をサポートするようになりました。これは、トランジションとしてマークされた更新を維持しながら、内部で非同期タスク (データのフェッチなど) を実行できることを意味します。この機能強化により、startTransition をより柔軟かつ直感的に使用できるようになり、技術的には既存の機能の改良であるにもかかわらず、「新しい」機能のように感じられます。

?
慣例により、非同期遷移を使用する関数は「アクション」と呼ばれます。

たとえば、useState:
で保留状態とエラー状態を処理できます。

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

React 19 は、保留状態、エラー、フォーム、オプティミスティック更新を自動的に処理するために、遷移での非同期関数の使用をサポートしています。たとえば、useTransition を使用して保留状態を処理できます。

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

非同期遷移は、即座に isPending 状態を true に設定し、非同期リクエストを作成し、遷移後に isPending を false に切り替えます。これにより、データが変更されている間も、現在の UI の応答性と対話性を維持できます。

アクション

React チームは、アクションとして関数を渡すサポートを追加しました。

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

formAction 関数 (任意の名前を付けることができます) は、パラメーター内のフォーム データを取得します。各フィールドは name 属性で示されるため、入力の名前付けには注意する必要があります。 formData パラメータは、実際にはネイティブの FormData Web API オブジェクトです。 mdn Web ドキュメントで確認できます。もう 1 つの良い点は、react によって処理されるため、event.preventDefault() を適用する必要がないことです。

フォームのアクションが成功すると、React はフォームを自動的にリセットします。ただし、

をリセットしたい場合は、手動で、新しい requestFormReset React DOM API を呼び出すことができます。

新しいフック: useActionState

?
React.useActionState は、Canary リリースでは以前 ReactDOM.useFormState と呼ばれていましたが、名前が変更され、useFormState に非推奨になりました。

useActionState は、コンポーネントの状態、保留ステータスを追跡し、フォームまたはミューテーションを実行したいその他の場所で使用するラップされたアクション関数を提供します。

よりわかりやすく説明する例を次に示します。

import { useActionState } from "react"
import { updateNameInDB } from "../api/user"

export default function App() {
    const [user, formAction, isPending] = useActionState(insertName, {
        name: "John Doe",
        error: null
    })

    async function insertName(prevState, formData){
        try {
            const response = await updateNameInDB(formData.get("name"))
            return {name: response.name}
        }catch(error){
            return {...prevState, error: error.error}
        }
    }

    return (
        <>
            {user?.name && (
                <p>



<p>How this hook works is described with reference to the example:</p>

<ol>
<li><p>The first argument of the useActionState hook is the "Action" function, which is defined here as insertName.</p></li>
<li><p>The second argument is the initial state, which is accessible through the first element of the result array. In this example, the initial state includes name and error, and the state is represented as user in the component.</p></li>
<li><p>The insertName function returns the updated state. If the operation is successful, it updates the name property. If an error occurs, it updates the error property while preserving the rest of the previous state.</p></li>
<li>
<p>The result of the useActionState hook is an array with three elements:</p>

<ul>
<li>The current state (user): Reflects the latest state of the data.</li>
<li>A dispatchable function (formAction): Triggers the action when called, as seen in the form element's action attribute.</li>
<li>A pending state (isPending): Tracks whether the action is currently in progress, useful for managing transitions or loading indicators.</li>
</ul>
</li>
</ol>

<h2>
  
  
  New Hook: useOptimistic
</h2>

<p>When it’s performing a data mutation and to show the final state right after the user instructs (could be a tap on a button) or you could say optimistically while the async request is underway, you need to use this hook. Here is a demonstration how you can do this:<br>
</p>

<pre class="brush:php;toolbar:false">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>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

useOptimistic フックは、updateName リクエストの進行中にすぐに optimisticName をレンダリングします。更新が完了すると、React は更新された値を currentName に挿入します。または、更新でエラーが発生した場合、React は自動的に currentName 値に戻ります。

新しいフック: useFormStatus

useFormStatus フックは、フォームの送信を追跡するのに役立ちます。ちょっと待って ？！非同期遷移を追跡するための別のフックですか?答えは「はい」でも「いいえ」でもあります。 useActionState フックについてはすでに学習したので、これは非同期遷移を追跡するための別のフックであると言えます。ただし、useFormStatus はアクションを発生させるものではなく、最後のフォーム送信のステータス情報を提供します。

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

ここで注目すべき最も重要なことは、useFormStatus フックが実際には React ではなく、react-dom から来ているということです。

useFormStatus は、親

のステータスを読み取ります。あたかもフォームがコンテキストプロバイダーであるかのように。ステータス情報を取得するには、Submit コンポーネントを 内でレンダリングする必要があります。フックは、フォームがアクティブに送信されているかどうかを示す保留中のプロパティなどの情報を返します。

上記の例では、Submit はこの情報を使用して を無効にします。フォームの送信中に押します。

新しい API: 使用する

use を使用して Promise を読み取ることができ、React は Promise が解決されるまでコンポーネントを一時停止します。

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

上記の例は、API を使用するユースケースを示しています。 「Comments」は、「commentsPromise」という Promise を使用するコンポーネントです。 Promise は、コンポーネントを一時停止させる新しい使用 API によって消費されます。ちなみに、コンポーネントを Suspense フォールバックでラップする必要があります。

API の使用には、注意しなければならない制限があります。制限は、コンポーネントを含む API を使用すると再レンダリングが行われるたびに別の Promise が作成され、パフォーマンスの低下につながることです。したがって、基本的にはキャッシュメカニズムがありません。以下はリリース ブログからの注意深いメモです:

API を使用すると、コンテキストからもデータが読み取られます。たとえば、コンテキスト値を読み取るには、コンテキストを use() に渡すだけで、関数はコンポーネント ツリーを走査して最も近いコンテキスト プロバイダーを見つけます。

コンテキストを読み取るための useContext() フックとは異なり、use() 関数はコンポーネントの条件文とループ内で使用できます!

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

prop としての ref (forwardRef なし)

React 19 では、他の prop と同じように ref を渡すことができるため、 forwardRef は非推奨になります。これにより、コンポーネント コードが合理化され、ref の処理が簡単になります。 ?

import { useActionState } from "react"
import { updateNameInDB } from "../api/user"

export default function App() {
    const [user, formAction, isPending] = useActionState(insertName, {
        name: "John Doe",
        error: null
    })

    async function insertName(prevState, formData){
        try {
            const response = await updateNameInDB(formData.get("name"))
            return {name: response.name}
        }catch(error){
            return {...prevState, error: error.error}
        }
    }

    return (
        <>
            {user?.name && (
                <p>



<p>How this hook works is described with reference to the example:</p>

<ol>
<li><p>The first argument of the useActionState hook is the "Action" function, which is defined here as insertName.</p></li>
<li><p>The second argument is the initial state, which is accessible through the first element of the result array. In this example, the initial state includes name and error, and the state is represented as user in the component.</p></li>
<li><p>The insertName function returns the updated state. If the operation is successful, it updates the name property. If an error occurs, it updates the error property while preserving the rest of the previous state.</p></li>
<li>
<p>The result of the useActionState hook is an array with three elements:</p>

<ul>
<li>The current state (user): Reflects the latest state of the data.</li>
<li>A dispatchable function (formAction): Triggers the action when called, as seen in the form element's action attribute.</li>
<li>A pending state (isPending): Tracks whether the action is currently in progress, useful for managing transitions or loading indicators.</li>
</ul>
</li>
</ol>

<h2>
  
  
  New Hook: useOptimistic
</h2>

<p>When it’s performing a data mutation and to show the final state right after the user instructs (could be a tap on a button) or you could say optimistically while the async request is underway, you need to use this hook. Here is a demonstration how you can do this:<br>
</p>

<pre class="brush:php;toolbar:false">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>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

React チームは、forwardRef を今後のバージョンで非推奨にすることを決定しました。

Reactサーバーコンポーネント

ところで、React Server Components (RSC) はサーバー側レンダリングをサポートする React 機能 であることを知っておいてください。ただし、Next.js のようなフレームワークは RSC を採用し、ワークフローにシームレスに統合しています。エコシステムを初めて使用する場合は、そのメカニズムの研究に入る前に、このことを明確にしておいてください。

React サーバー コンポーネントは、React 19 で導入された新しい機能で、サーバー上で実行されるステートレスな React コンポーネントを作成できるようになります。

React サーバー コンポーネントは Web サーバー上で実行できるため、API とやり取りすることなくデータ レイヤーにアクセスするために使用できます!

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

これにより、API エンドポイントを公開したり、追加のクライアント側フェッチ ロジックを使用してデータをコンポーネントに直接読み込んだりする必要がなくなります。すべてのデータ処理はサーバー上で行われます。

サーバー コンポーネントはブラウザーではなくサーバー上で実行されることに注意してください。その結果、useState などの従来の React コンポーネント API を使用できなくなります。 React サーバー コンポーネント設定に対話性を導入するには、対話性を処理するためにサーバー コンポーネントを補完するクライアント コンポーネントを活用する必要があります。

React サーバー コンポーネントを使用する場合、「クライアントを使用する」は、コンポーネントがクライアント コンポーネントであることを示します。これは、状態を管理し、ユーザー インタラクションを処理し、ブラウザー固有の API を使用できることを意味します。このディレクティブは、React フレームワークとバンドラーに対して、このコンポーネントをステートレスでサーバー上で実行されるサーバー コンポーネントとは異なる方法で扱うように明示的に指示します。

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

逆に、React サーバー コンポーネントはデフォルトであるため、サーバー コンポーネント ファイルの先頭に「サーバーを使用する」とは記述しません。代わりに、「サーバーを使用」は、クライアント コンポーネントから呼び出すことができるサーバー側関数をマークするためにのみ使用する必要があります。

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

この例はそれをよく示していると思います。

結論

React 19 はまだ React Canary と呼ばれています。したがって、本番環境で使用することは得策ではありません。しかし、React 19 で未来を受け入れ、開発エクスペリエンスをよりスムーズで楽しいものにしてください。

以上が新しい React がもたらしたもの - 明確に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。