新しい React がもたらしたもの - 明確に理解する-jsチュートリアル-php.cn

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 はこの情報を使用して