新しいアップデートに反応する

今週は、React 19 の新しいアップデートとフックについて話します。これらの新しいアップデートをいくつか試して使用してみたところ、開発者がアプリ、特にインタラクティブなフォーム関連のアプリケーションを構築する際に行う厳しい作業の一部が簡素化されたことに同意するほかありません。

私と一緒に、これらの新しいアップデートのいくつかを探索してみましょう。

React コンパイラー: React コンパイラーは React コードを選択し、ブラウザー用の JavaScript コード に変換し、コンポーネントまたはユーザー インターフェイスの状態を管理します。この特異なアクションは、アプリケーションのパフォーマンスの最適化に役立ちます。

useMemo フック、useCallback フック、および React.Memo に精通している場合は、これらがコンポーネントのメモ化 (将来の使用に備えて値や関数の保存) に役立つため、再実行する必要がないことが理解できるでしょう。状態変化がないときにレンダリングします。状態に変化があると、React は問題のコンポーネントとその子を再レンダリングします。コードに変更がない場合、コンポーネントはそのまま残り、将来のためにコンポーネントまたはフック内の以前のメモリ、値、状態を保持します。用途;これにより、コンポーネントのパフォーマンスが最適化されます。これは、前述のフックを手動で呼び出す必要がなく、React Compiler が自動的に行うこととまったく同じです。

フォームアクション: React を使用する最大の利点の 1 つは、状態の管理と変更 です。これは主に を使用するときに発生します。 要素。フォームは、ユーザーの対話性をより効果的に作成および処理するのに役立ちます。

フォームアクションを使用すると、データのライブミューテーションを行うためにonSubmitやonChangeなどのイベントハンドラーは必要ありません。代わりにactionプロパティを渡すことができます。イベントをトリガーする関数を受け取る

要素に追加します。

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

<form action={myFunction}>
   <input type="name" 
          name="name" _// this is important to be able to get our data //_
   />
   <button type="submit">Submit</button>
</form>

このアプローチでは、event.target.value を介してデータを変更するために useState を適用する必要はありません。代わりに、myFunction で次のことができます。引数を介して変更されたデータを取得します。

これは、フォームの 要素から name 属性を設定する必要があることを意味します。このメソッドを使用すると、React がイベント ハンドラーを通じて手動で状態を変更する代わりに、ネイティブ React フォーム オブジェクト を通じてフォーム自体を処理できるようになります。

サーバー コンポーネント: React 19 では、コンポーネントをバンドルする前に、クライアント アプリケーションまたは SSR サーバーのセットアップとは別の環境でサーバー上でレンダリングできます。サーバー コンポーネントは SSR (サーバー サイド レンダリング) と同じではなく、React Server コンポーネントの別のサーバー環境です。
この機能により、コンポーネントが時間前に事前レンダリングできるため、コンテンツの表示が高速になり、読み込み時間が短縮されます。

メタデータ: React 19 では柔軟なメタデータが可能です。開発者は、DocumentHead コンポーネントを通じて、個々のコンポーネントの title、description、およびその他の meta タグを管理できます。これは SEO (検索エンジン最適化) の向上に役立ちます。

Const AboutUs = () => {
 return (
    <>
      <title>Learn more about our company</title>
      <meta name="AboutUs" description="You can find us on ..." />
      // content
    </>
  );
}

React 19 には一連の 新しい フックがあり、一部は新しいフックであり、その他は既存のフックの改良です。以下でそれらについて説明しましょう。

use() フック: use フックは、コンポーネントまたはフック内の Promise またはコンテキストの値を読み取るために直接使用できる実験的な API (現時点で既知の唯一の制限です) ）。
use フックは非常に多用途であり、非同期データのフェッチに使用できるため、useEffect の代わりに使用することもできます。これは
に役立ちます より整然とした簡潔なコード ブロックを実現します。

注意: useEffect の代替品ではありません。これは、_useEffect _が制限なく実行されるという独自の制限が依然として存在するためです。

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    <div className='username'>{user.name}</div>
  );
}

useActionState(): これは、状態変更の管理に役立つ新しいフックです。保留状態、エラー処理、最終的な処理を管理するのに役立ちます
状態の更新。 useActionState は、フォームの送信時に呼び出される関数と _initialState の 2 つのパラメーターを受け取る点で _useReduce と同様に機能し、次の 3 つの値を含む配列を返します。 state (状態の変更がある場合は現在の状態になります)、サーバーアクションを呼び出すためにフォームコンポーネントのプロップとして渡すことができる新しいアクション(formAction)、および _isPending _that は、_boolean _value を返します。フォームが送信されました。

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState + 1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    <form>
      <button formAction={formAction}>{state}</button>
    </form>
  )
}

From this example, the incrementFunction adds 1 to the state every time the button is clicked. The initialState being 0, and then increases to 1 at the first click of the button, thereby changing the state to 1, and for every other click on the button adds 1 to the last state of the component.

useOptimistic() hook:

This is a new hook that allows users to see the outcome of their action even before the pages load completely. The pages are optimistically rendered to the user even when the server is still in its data fetching mode.

With the hope that data fetching will be successful, React displays the intended result to the client, and when data fetching fails, React reverts to the value of the previous state in order not to display incorrect data. This singular action helps in a seamless and fast display of data thereby improving user experience.

useFormStatus():

As the name implies, useFormStatus gives us the status of our form or form fields. This hook does not take in any parameter, but it sure returns 4 objects:

pending: This returns a boolean value: true or false. It returns true when the form is submitting, and false when the form is submitted.

data: When the form is successfully submitted, we can get the information of the user or object from the form field like this:

(formData.get("name"))
(formData.get("address"))

method: The default method of a form is GET, unless stated otherwise. We can get the method of our form with .method. When we are submitting a form, a string method property should be specified as a POST.

action: This is a reference to the function that will be passed to the action prop in our element.

The useFormStatus must always be called from a element or a component that is rendered inside a .

There's quite a few more updates that I can't really write about, so you don't get bored having to read so much. You can click on the React Docs Website to check out some of the other updates.

I hope you had a great time learning with me.

Do well to follow me if you enjoyed my articles.

Thanks, and have a great week ahead my friends.

以上が新しいアップデートに反応するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。