React Essentials: 不足している可能性のある機能

React は、動的で応答性の高いユーザー インターフェイスを構築するための頼りになるライブラリとしての地位を固めています。 React は、宣言型アプローチとコンポーネントベースのアーキテクチャにより、最新のアプリケーション開発の複雑なプロセスを簡素化します。ただし、他の強力なツールと同様に、経験豊富な開発者であっても目立たない機能やベスト プラクティスがあります。

このブログでは、React の見過ごされている側面、つまり開発ワークフローを強化し、パフォーマンスを最適化し、よりクリーンで効率的なコードを作成するのに役立つ機能について詳しく説明します。

1. レイアウトフック (useLayoutEffect)

依存関係が変更されるたびに効果的なコードを作成できる useEffect フックについては誰もが聞いたことがあるでしょう。 useLayoutEffect は useEffect フックのバージョンで、ブラウザが画面を再描画するたびに起動され、多くのシナリオで役立ちます。

ツールチップ

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
}, []);
// ...

このコードは、画面がレンダリングされる前にツールチップが画面に収まるかどうかをチェックし、それ自体を再配置します。

詳しい説明については、https://react.dev/reference/react/useLayoutEffect をご覧ください

2. アウトレット (リアクトルーター)

React Native の一部ではありませんが、React Router は、React でルーティングを管理する場合に非常に有名で便利なライブラリです。人気があるため、ドキュメントで言及されているが気づかれない機能が多数あります。

コンセントの使い方

プロジェクトのダッシュボードをデザインしたことがありますか?トップバー要素とサイドバー要素が常に一定で、ページの一部だけが異なるルート間で変更される場合はどうでしょうか。まさにここで、ネストされたルーティングとアウトレットの概念が登場します

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route path="messages" element={<DashboardMessages />} />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

親ルート path="/" は、動的コンポーネントをロードするページのプレースホルダーまたはレイアウトを示します。上記の例の Dashboard() には見出しのみがあり、ページ上の次のコンテンツは依存します。ルート上では /messages または /tasks にいます。 OutletContext

を使用して、すべてのサブページのコンテキストを作成することもできます。

詳細はこちら: https://reactrouter.com/en/main/components/outlet

3. 読み込みの最適化 (React.Suspense + Await)

React Router の助けを借りて、React は他のライブラリを使用せずにローダーとフォールバックをサポートします。これらの使用方法の簡単な例を次に示します。

function Book() {
  const { book, reviews } = useLoaderData();
  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<ReviewsSkeleton />}>
        <Await
          resolve={reviews}
          errorElement={
            <div>Could not load reviews ?</div>
          }
          children={(resolvedReviews) => (
            <Reviews items={resolvedReviews} />
          )}
        />
      </React.Suspense>
    </div>
  );
}

注: Await は 内でレンダリングされることを想定しています。または 親を使用してフォールバック UI を有効にします。

まとめ

開発プロセスを大幅に強化できる、見落とされがちだが強力な React の機能をいくつか検討しました。私たちは、ネストされたルーティングと、アプリケーション内での子ルートの処理を簡素化する Outlet コンポーネントの使用から始めました。次に、レイアウト フック、特に useLayoutEffect について詳しく説明しました。これは、ブラウザーが再描画される前に更新を実行し、よりスムーズな UI インタラクションを保証するために重要です。また、React の Await タグと Suspense タグの使用についても説明しました。これにより、非同期操作をより効果的に管理し、より高速で応答性の高いユーザー インターフェイスを構築できるようになります。これらの機能を理解して活用することで、パフォーマンスとスケーラビリティの両方が最適化された、よりクリーンで効率的な React コードを作成できます。

以上がReact Essentials: 不足している可能性のある機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。