React With コード例の新機能-jsチュートリアル-php.cn

React 19 は、パフォーマンスと効率を新たな高みに押し上げる機能が満載です。あなたが経験豊富なプロであっても、React を初めて始めたばかりであっても、これらのアップデートは必ず注目を集めるでしょう。

まず、新しい React コンパイラー。この悪者はビルド時にコードを最適化し、アプリをより高速かつ効率的にします。バンドルが肥大化して速度が低下することを心配する必要はもうありません。

次に、サーバーコンポーネント。これらにより、レンダリングをサーバーにオフロードできるため、クライアント側のワークロードが軽減されます。これは、読み込み時間が短縮され、ユーザーエクスペリエンスがよりスムーズになることを意味します。

次に、アクションがあります。これらは、状態の更新と副作用を統合することにより、状態管理を簡素化します。乱雑なコードに別れを告げ、よりクリーンで保守しやすいプロジェクトに別れを告げましょう。

ドキュメントメタデータ管理 も優れた機能です。タイトルやメタタグなどのメタデータをコンポーネント内で直接管理できるようになりました。これにより、SEO タスクが合理化され、コードベースの一貫性が高まります。

強化された アセットの読み込み により、静的アセットをより効率的に処理できるようになり、ゲームが強化されます。画像、フォント、その他のリソースをより速く読み込み、アプリの応答性を高めます。

新しい フック。これらは機能コンポーネントにさらに強力な機能をもたらし、状態と副作用を簡単に管理できるようにします。新しいフックは柔軟性と制御性を高め、React コードをよりクリーンかつ効率的にします。

これらの各機能については、以降のセクションで詳しく説明します。引き続きご期待ください。React 19 のエキサイティングな世界に深く飛び込む準備をしてください!

React コンパイラの機能強化

バージョン 19 の React コンパイラーは、React 開発をより良くします。 React コードを通常の JavaScript に変換し、メモ化を処理し、状態の変更と UI の更新を改善します。 useMemo()、useCallback()、またはメモを使用する必要はもうありません。コンパイラがそれを実行し、コードをよりクリーンかつ高速にします。

この新しいコンパイラーを使用すると、React が UI を更新するタイミングを判断し、開発が容易になります。これらの改善により、アプリは 2 倍の速度で実行される可能性があります。 Instagram はすでに React Compiler を実際の状況で使用しており、うまく機能することを示しています。

React を初めて使用し、その基本的な機能を理解したい場合は、初心者向けの React Hooks の基本を調べることに興味があるかもしれません。このガイドでは、機能コンポーネントで状態を管理するために不可欠な useState や useEffect などのフックの使用方法を包括的に紹介します。

コンパイラがどのように動作するかを示す簡単な例を次に示します。

    import React, { useState } from 'react';

    function Counter() {
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

ログイン後にコピー

この例では、React コンパイラーによって Counter コンポーネントが改善されています。追加のコードを追加することなく、状態の変更と更新を効率的に処理します。

React Compiler は最適化を自動化し、パフォーマンスを向上させ、コードの保守を容易にします。 React 19 は、開発エクスペリエンスを向上させるための多くの新機能をもたらします。

サーバーコンポーネントについて

React 19 のサーバーコンポーネントは状況を一変させます。これらはサーバー上で実行され、HTML をクライアントに送信します。これは、ページの読み込みが速くなり、SEO が向上し、ユーザーに送信される JavaScript が減少することを意味します。

これらのコンポーネントは、リソースを大量に消費するタスクや、ページが表示される前に実行する必要があるタスクに最適です。これらをサーバー上で処理することで、アプリの効率が向上します。

サーバーコンポーネントは Next.js とシームレスに統合されます。「use server」ディレクティブを使用して、コンポーネントがサーバー上で実行されるように指定します。これにより、クライアント側のコードが軽量かつ高速に保たれます。

これが簡単な例です:

    // server.js
    import { useServer } from 'react';

    function ServerComponent() {
      useServer();

      const data = fetchDataFromAPI(); // Assume this fetches data from an API

      return (
        <div>
          <h1>Data from Server</h1>
          <p>{data}</p>
        </div>
      );
    }

    export default ServerComponent;

ログイン後にコピー

この例では、ServerComponent がサーバー上の API からデータを取得します。その後、HTML がクライアントに送信されるため、ページの読み込みが速くなります。クライアント側の JavaScript がデータをフェッチするのを待つ必要はありません。

サーバーコンポーネントは、API 呼び出しなどのサーバー側のタスクも効率化します。ページが配信される前にサーバー上でこれらを処理することは、ユーザーがより高速でスムーズなエクスペリエンスを得ることができることを意味します。

JavaScript アプリケーションをさらに最適化することに興味がある場合は、読み込み時間とパフォーマンスを向上させるコード分割テクニックを習得することを検討してください。

つまり、サーバーコンポーネントは React アプリをより高速かつ効率的に実行します。これらにより、クライアント側のワークロードが軽減され、SEO が向上し、ページの読み込みが高速化されます。次のプロジェクトで試してみてください。

アクションによるフォーム処理の簡素化

React 19 のアクションにより、フォームの処理が簡単になります。これらは onSubmit を置き換え、サーバー側の実行に HTML フォーム属性を使用し、クライアントまたはサーバー側で同期操作と非同期操作の両方を処理します。

アクションにより保留状態が発生します。フォームを送信すると、リクエストの開始時にアクティブ化され、最終状態が更新された後にリセットされます。これにより、データ変更中に UI の応答性が維持されます。

Here's how to use Actions in a form:

    import React from 'react';

    function MyForm() {
      return (
        <form action="/submit" method="post">
          <label>
            Name:
            <input type="text" name="name" />
          </label>
          <button type="submit">Submit</button>
        </form>
      );
    }

    export default MyForm;

ログイン後にコピー

In this example, the action attribute handles data submission. This setup works for client and server-side operations without extra JavaScript for the onSubmit event.

Actions improve data management and interactions on web pages. Using HTML form attributes simplifies state updates and keeps the UI interactive. As a result, forms become easier to handle and less likely to break.

React 19's Actions help developers write simpler code and improve performance. Try Actions in your next project - you might find it makes things work better.

What

Managing Document Metadata

React 19 makes managing document metadata a breeze with the new component. This feature allows you to include titles and meta tags directly within your React components. It simplifies SEO and makes your code more cohesive.

Here's a quick example:

    import React from 'react';
    import { DocumentHead } from 'react';

    function MyPage() {
      const pageTitle = "Welcome to My Page";
      const pageDescription = "This is an example page showing off React 19's new DocumentHead component.";

      return (
        <div>
          <DocumentHead>
            <title>{pageTitle}</title>
            <meta name="description" content={pageDescription} />
          </DocumentHead>
          <h1>{pageTitle}</h1>
          <p>{pageDescription}</p>
        </div>
      );
    }

    export default MyPage;

ログイン後にコピー

In this snippet, is used to set the page title and description dynamically. This approach streamlines SEO tasks by centralizing metadata management within your components.

Dynamic metadata changes based on the application state, something that was cumbersome with libraries like React Helmet. Now, React 19 handles it natively, making your SEO practices more efficient.

Using ensures your app's metadata is always up-to-date and consistent. This is crucial for improving search engine rankings and providing a better user experience.

For those interested in how modern JavaScript features can further optimize your web applications, understanding techniques like tree shaking to eliminate dead code is essential. This optimization technique, particularly useful in conjunction with ES6 modules, can significantly enhance performance by reducing the final bundle size.

React 19's component makes it easier to manage document metadata directly within your components. It simplifies SEO, enhances accessibility, and ensures a cohesive codebase.

Improved Web Components Integration

React 19 makes integrating Web Components easier. You can now use custom elements, shadow DOM, and HTML templates without extra packages or conversions. This boosts flexibility and compatibility in frontend development.

Web Components let you create reusable components with standard HTML, CSS, and JavaScript. React 19's improved support means you can drop these straight into your React projects. This reduces friction and simplifies your development process.

Here's a basic example of how to incorporate a Web Component into a React app:

First, define your Web Component:

    // my-web-component.js
    class MyWebComponent extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
          <style>
            p {
              color: blue;
            }
          </style>
          <p>Hello from Web Component!</p>
        `;
      }
    }

    customElements.define('my-web-component', MyWebComponent);

ログイン後にコピー

Next, use this Web Component in your React component:

    import React from 'react';
    import './my-web-component.js';

    function App() {
      return (
        <div>
          <h1>React and Web Components</h1>
          <my-web-component></my-web-component>
        </div>
      );
    }

    export default App;

ログイン後にコピー

In this example, MyWebComponent is defined with a shadow DOM and some styles. It's then used in the App component like any other HTML element. No extra libraries or tools are needed.

This seamless integration lets you leverage the power of Web Components within your React projects. It’s a great way to reuse code and maintain consistency across different parts of your application.

React 19's enhanced support for Web Components opens up new possibilities for your development workflow. You get the best of both worlds: React's powerful ecosystem and the flexibility of custom elements. Give it a try in your next project.

Optimized Asset Loading

Asset loading in React 19 significantly improves. It makes loading images, scripts, stylesheets, and fonts faster and more efficient. By using features like Suspense and new Resource Loading APIs (preload and preinit), you can ensure your assets load in the background, reducing wait times and improving user experience.

Suspense helps you load components or assets in the background, showing a fallback UI until everything is ready. This keeps your app responsive and smooth.

Here's a basic example:

    import React, { Suspense, lazy } from 'react';

    const LazyImage = lazy(() => import('./LazyImage'));

    function App() {
      return (
        <div>
          <h1>Optimized Asset Loading</h1>
          <Suspense fallback={<div>Loading...</div>}>
            <LazyImage />
          </Suspense>
        </div>
      );
    }

    export default App;

ログイン後にコピー

In this code, LazyImage loads in the background, and a fallback UI appears until it's ready. This improves the perceived performance and keeps users engaged.

The preload and preinit APIs let you control when and how assets load, ensuring critical resources are available when needed.

Here's an example of using preload:

    <link rel="preload" href="/path/to/image.jpg" as="image">
    <link rel="preload" href="/path/to/style.css" as="style">

ログイン後にコピー

In this HTML snippet, the preload attribute ensures the image and stylesheet load early, reducing the time users wait for these resources.

Using preinit is similar. It preloads scripts to ensure they're ready when needed:

    <link rel="preinit" href="/path/to/script.js" as="script">

ログイン後にコピー

By using these techniques together, you can load critical assets efficiently, reducing page load times and improving the overall user experience. React 19's enhanced asset loading capabilities make it easier to build fast, responsive applications.

For more insights on optimizing your JavaScript modules, you might find it useful to read my detailed comparison on using require vs import in JavaScript. These features improve user experience and engagement. React 19's optimized asset loading is one of many improvements to the development process.

New Hooks in React 19

React 19 brings some exciting new hooks to the table that make handling state and async operations easier. Let’s dive into these new hooks: useOptimistic, useFormStatus, useFormState, and use.

useOptimistic: This hook helps manage optimistic UI updates. It allows your UI to update immediately, even before the server confirms the changes. This makes your app feel faster and more responsive.

    import { useOptimistic } from 'react';

    function LikeButton({ postId }) {
      const [isLiked, setIsLiked] = useOptimistic(false);

      const handleLike = async () => {
        setIsLiked(true);
        await api.likePost(postId);
      };

      return (
        <button onClick={handleLike}>
          {isLiked ? 'Liked' : 'Like'}
        </button>
      );
    }

ログイン後にコピー

useFormStatus: This hook keeps track of the status of form fields. It’s great for showing loading states or validation messages.

    import { useFormStatus } from 'react';

    function MyForm() {
      const { isSubmitting, isValid } = useFormStatus();

      return (
        <form action="/submit" method="post">
          <label>
            Name:
            <input type="text" name="name" />
          </label>
          <button type="submit" disabled={isSubmitting || !isValid}>
            {isSubmitting ? 'Submitting...' : 'Submit'}
          </button>
        </form>
      );
    }

ログイン後にコピー

useFormState: This one helps manage the state of your forms. It updates state based on form actions, simplifying form management.

    import { useFormState } from 'react';

    function ContactForm() {
      const { values, handleChange } = useFormState({
        name: '',
        email: '',
      });

      return (
        <form>
          <label>
            Name:
            <input type="text" name="name" value={values.name} onChange={handleChange} />
          </label>
          <label>
            Email:
            <input type="email" name="email" value={values.email} onChange={handleChange} />
          </label>
          <button type="submit">Submit</button>
        </form>
      );
    }

ログイン後にコピー

use: This hook simplifies working with promises and async code. It fetches and utilizes resources within components, reducing boilerplate code.

    import { use } from 'react';

    function UserProfile({ userId }) {
      const user = use(fetchUserProfile(userId));

      return (
        <div>
          <h1>{user.name}</h1>
          <p>{user.bio}</p>
        </div>
      );
    }

ログイン後にコピー

These new hooks in React 19 make your code cleaner and more efficient. They simplify state management and async operations, making development smoother. Try them out in your next project!

Using the Use() Hook

React 19 introduces the use() hook, making handling promises and async operations a breeze. This hook lets you fetch data and manage async tasks directly within your components, cutting down on boilerplate code.

Here's a basic example to get you started:

    import { use } from 'react';

    function UserProfile({ userId }) {
      const user = use(fetchUserProfile(userId));

      return (
        <div>
          <h1>{user.name}</h1>
          <p>{user.bio}</p>
        </div>
      );
    }

ログイン後にコピー

In this example, use() fetches user data from an async function fetchUserProfile. The fetched data is then used directly within the component, making the code cleaner and more straightforward.

You can also use use() for more complex operations, such as fetching multiple resources:

    import { use } from 'react';

    function Dashboard() {
      const user = use(fetchUser());
      const posts = use(fetchPosts(user.id));

      return (
        <div>
          <h1>Welcome, {user.name}</h1>
          <ul>
            {posts.map(post => (
              <li key={post.id}>{post.title}</li>
            ))}
          </ul>
        </div>
      );
    }

ログイン後にコピー

Here, use() first fetches user data, then fetches posts based on the user ID. This chaining of async operations keeps your component logic tidy and easy to follow.

The use() hook can even handle conditional logic:

    import { use } from 'react';

    function Notifications({ userId }) {
      const notifications = use(userId ? fetchNotifications(userId) : Promise.resolve([]));

      return (
        <ul>
          {notifications.map(note => (
            <li key={note.id}>{note.message}</li>
          ))}
        </ul>
      );
    }

ログイン後にコピー

In this snippet, use() fetches notifications only if userId is provided. Otherwise, it returns an empty array. This makes the component logic adaptable and concise.

React 19's use() hook simplifies async data handling, making your code cleaner and more maintainable. Try it out to streamline your next project!

Form Handling with useFormStatus and useFormState

Form handling in React 19 gets a significant boost with the introduction of useFormStatus and useFormState. These hooks simplify managing form submission status and state updates, making your forms more efficient and user-friendly.

The useFormStatus hook keeps track of the form's submission status. It helps display pending states and handle submission results. This means your users get immediate feedback, enhancing their experience.

Here's a quick example of useFormStatus in action:

    import { useFormStatus } from 'react';

    function MyForm() {
      const { isSubmitting, isValid } = useFormStatus();

      return (
        <form action="/submit" method="post">
          <label>
            Name:
            <input type="text" name="name" />
          </label>
          <button type="submit" disabled={isSubmitting || !isValid}>
            {isSubmitting ? 'Submitting...' : 'Submit'}
          </button>
        </form>
      );
    }

ログイン後にコピー

In this example, useFormStatus provides isSubmitting and isValid states. The button disables while submitting, giving users clear feedback.

Next, the useFormState hook manages form state based on form actions. It updates state efficiently, keeping your code clean and maintainable.

Here’s how you can use useFormState:

    import { useFormState } from 'react';

    function ContactForm() {
      const { values, handleChange } = useFormState({
        name: '',
        email: '',
      });

      return (
        <form>
          <label>
            Name:
            <input type="text" name="name" value={values.name} onChange={handleChange} />
          </label>
          <label>
            Email:
            <input type="email" name="email" value={values.email} onChange={handleChange} />
          </label>
          <button type="submit">Submit</button>
        </form>
      );
    }

ログイン後にコピー

In this snippet, useFormState helps manage the form's input values. The handleChange function updates the state, making form handling straightforward.

For more advanced techniques in managing your codebase, you might find my Git Cheat Sheet useful. It covers foundational commands, branching, merging, and more.

useFormStatus and useFormState streamline form management. They provide a more responsive and intuitive experience for both developers and users. Try these hooks in your next project to see how they can simplify your form handling.

What

Optimistic UI with useOptimistic

The useOptimistic hook in React 19 new features makes handling UI updates during async operations easier. It lets your UI show changes instantly, even before the server confirms them. This is called optimistic UI, and it makes your app feel faster and more responsive.

With useOptimistic, your interface updates right away while the async task runs in the background. If something goes wrong, you can undo the changes. This quick feedback keeps users engaged and makes wait times feel shorter.

Here's a simple example of how it works:

    import { useOptimistic } from 'react';

    function LikeButton({ postId }) {
      const [isLiked, setIsLiked] = useOptimistic(false);

      const handleLike = async () => {
        setIsLiked(true);
        try {
          await api.likePost(postId);
        } catch (error) {
          setIsLiked(false); // Undo if the request fails
        }
      };

      return (
        <button onClick={handleLike}>
          {isLiked ? 'Liked' : 'Like'}
        </button>
      );
    }

ログイン後にコピー

In this example, the LikeButton component uses useOptimistic to update the like state right when the button is clicked. If the api.likePost call fails, it reverts the state, keeping data consistent.

Using useOptimistic makes your app feel snappier and more interactive. Users get instant feedback, creating a smoother experience. This hook is great for actions like liking a post, adding items to a cart, or any task where quick feedback matters.

React 19's useOptimistic hook makes it easier to implement optimistic UI, helping you build more engaging and user-friendly apps. For more insights on integrating design into your development process, check out my article on how Agile methodologies should not exclude design. Give it a try in your next project - you'll quickly see how it improves things.

Steps to Upgrade to React 19

Upgrading to React 19 is straightforward. Follow these steps to ensure a smooth transition:

Update Dependencies: First, update React and ReactDOM to the latest version. Run the following command in your project directory:

    npm install react@19 react-dom@19

ログイン後にコピー

Check for Deprecated Features: Go through the release notes for React 19. Identify any deprecated features and update your code accordingly. This step is crucial to avoid any surprises during the upgrade.
Run Tests: Ensure your test suite passes with the new version. Running your tests early helps catch any potential issues that the upgrade might introduce. Use the following command to run your tests:

    npm test

ログイン後にコピー

Monitor Performance: After upgrading, keep an eye on your application's performance. Look out for any regressions. Tools like React Profiler can help you monitor performance changes.

    import { Profiler } from 'react';

    function App() {
    return (

    <Profiler
      id="App"
      onRender={(id, phase, actualDuration) => {
        console.log({ id, phase, actualDuration });
      }}
    >
      <YourComponent />
    </Profiler>
    ); }

ログイン後にコピー

Fix Any Issues: Address any problems that arise during testing and performance monitoring. Make sure your application runs smoothly with React 19.

If you're interested in the tools and technologies I use to enhance productivity and creativity in my development workflow, check out my curated list of technology and equipment.

Following these steps will help you upgrade to React 19 without major hiccups. Happy coding!

Wrapping Up React 19 Features

React 19 brings a host of new features that make development smoother and more efficient. The new React Compiler automatically optimizes your code, speeding up your apps without extra effort. Server Components shift heavy lifting to the server, resulting in faster load times and better SEO.

Actions simplify state management, making your code cleaner and more maintainable. Document Metadata Management streamlines SEO tasks by letting you manage titles and meta tags directly within your components. Enhanced Asset Loading makes your app more responsive by efficiently handling static resources.

The introduction of new hooks like useOptimistic, useFormStatus, useFormState, and use provide more flexibility and control in functional components. These hooks simplify async operations and state management, making your code cleaner and more efficient.

Overall, React 19's updates focus on improving performance and developer experience. Whether you're optimizing assets, managing metadata, or handling async operations, these new features help you build faster, more efficient applications. Give React 19 a go in your next project and experience the improvements firsthand.

If you enjoyed this post, I bet you'll enjoy the weekly newsletter I send out to hundreds of other developers such as yourself! Check it out!

以上がReact With コード例の新機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。