React デザインパターンの概要

React アプリケーションのサイズと複雑さが増大するにつれて、クリーンで効率的かつスケーラブルなコードを維持することが課題になります。 React 設(shè)計(jì)パターンは、一般的な開(kāi)発問(wèn)題に対する実証済みのソリューションを提供し、開(kāi)発者が管理と拡張が容易なアプリケーションを構(gòu)築できるようにします。これらのパターンはモジュール性、コードの再利用、ベスト プラクティスの順守を促進(jìn)し、React 開(kāi)発者にとって不可欠なツールとなります。

このガイドでは、コンテナとプレゼンテーション コンポーネント、カスタム フック、メモ化パターンなどの主要な React 設(shè)計(jì)パターンを?qū)g踐的な方法で検討します。その利點(diǎn)を示す例を示します。初心者でも経験豊富な開(kāi)発者でも、この記事はこれらのパターンを使用してワークフローを改善し、より良い React アプリケーションを作成する方法を理解するのに役立ちます。

コンテナとプレゼンテーションのコンポーネント

コンテナおよびプレゼンテーション コンポーネント パターンは、アプリケーション ロジックを UI レンダリングから分離する、React で広く使用されている設(shè)計(jì)アプローチです。この分離は、懸念事項(xiàng)の分離の原則に沿って、モジュール式で再利用可能でテスト可能なコンポーネントを作成するのに役立ちます。

• コンテナコンポーネント: ビジネスロジック、狀態(tài)管理、データフェッチを処理します。彼らは物事がどのように機(jī)能するかに焦點(diǎn)を當(dāng)てています。
• プレゼンテーション コンポーネント: データと UI の表示を処理します。彼らは物事がどのように見(jiàn)えるかに焦點(diǎn)を當(dāng)てます。

この分割により、ロジックや UI の変更を相互に影響を與えることなく獨(dú)立して処理できるため、コードベースの保守が容易になります。

パターンの利點(diǎn)

1. コードの再利用性: プレゼンテーション コンポーネントは、アプリケーションのさまざまな部分で再利用できます。
2. テスト容易性の向上: ロジックがコンテナ コンポーネントに分離されるため、テストが容易になります。
3. メンテナンスの簡(jiǎn)素化: ロジックまたは UI の変更に個(gè)別に対処できるため、コードの他の部分が破損するリスクが軽減されます。

例: ユーザーデータの取得と表示

コンテナとプレゼンテーション コンポーネントのパターンを?qū)g裝する方法は次のとおりです:

コンテナコンポーネント

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

プレゼンテーションコンポーネント

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

この例では:

• UserContainer はユーザー データを取得し、それを読み込み狀態(tài)とともに props として UserList に渡します。
• UserList は、ユーザー データのレンダリングのみに重點(diǎn)を置いています。

このパターンは明確さを高め、コードの重複を減らし、テストを簡(jiǎn)素化します。これは、データの取得と UI レンダリングが頻繁かつ複雑なアプリケーションに特に役立ちます。

コンポジション用のカスタムフック

カスタム フック を使用すると、再利用可能なロジックをカプセル化して、React コードをよりクリーンかつモジュール化できます。複數(shù)のコンポーネント間でロジックを複製する代わりに、ロジックをフックに抽出して、必要な場(chǎng)所で使用できます。これにより、DRY (繰り返さない) 原則を遵守しながら、コードの再利用性とテスト容易性が向上します。

例: データフェッチフック

カスタムフック

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

フックの使用

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

この例では、useFetchData フックによってデータ フェッチ ロジックがカプセル化され、任意のコンポーネントが最小限の定型文でデータをフェッチできるようになります。カスタム フックは、コードを簡(jiǎn)素化し、クリーンなアーキテクチャを確保するために非常に役立ちます。

レデューサによる狀態(tài)管理

複雑な狀態(tài)やグループ化された狀態(tài)を管理する場(chǎng)合、Reducer Pattern は狀態(tài)遷移を処理するための構(gòu)造化された方法を提供します。狀態(tài)ロジックを 1 つの関數(shù)に集中化することで、狀態(tài)の更新が予測(cè)可能になり、デバッグが容易になります。 React の useReducer フックは、このパターンの実裝に最適です。

レデューサの利點(diǎn)

1. 予測(cè)可能性: 狀態(tài)の変更はアクションを通じて明示的に定義されます。
2. スケーラビリティ: 複數(shù)の依存関係を持つ複雑な狀態(tài)管理に適しています。
3. 保守性: 一元化されたロジックにより、デバッグとテストが簡(jiǎn)素化されます。

例: 認(rèn)証狀態(tài)の管理

レデ??ューサ機(jī)能

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetchData;

useReducer を使用するコンポーネント

import React from "react";
import useFetchData from "./useFetchData";

const Posts = () => {
  const { data: posts, loading } = useFetchData("/api/posts");

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

この例では:

• authReducer は、アクションに基づいて狀態(tài)がどのように変化するかを定義します。
• AuthComponent は useReducer を使用して認(rèn)証狀態(tài)を管理します。

リデューサーは、スケーラブルなアプリケーションで複雑な狀態(tài)ロジックを処理する場(chǎng)合に特に効果的であり、狀態(tài)管理の明確さと一貫性を促進(jìn)します。

コンテキスト API のプロバイダー パターン

プロバイダー パターン は、React の Context API を利用して、プロパティのドリルを行わずにコンポーネント間で狀態(tài)や関數(shù)を共有します。コンポーネントをコンテキスト プロバイダーでラップし、深くネストされたコンポーネントが共有データにアクセスできるようにします。

利點(diǎn)

1. プロップドリルの回避: 深くネストされたコンポーネントを介したデータの受け渡しを簡(jiǎn)素化します。
2. 集中狀態(tài)管理: テーマや認(rèn)証などのグローバル狀態(tài)を簡(jiǎn)単に管理します。

例: テーマのコンテキスト

const initialState = { isAuthenticated: false, user: null };

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return initialState;
    default:
      return state;
  }
}

コンテキストの使用

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

高次コンポーネント (HOC)

高次コンポーネント (HOC) は、コンポーネントを受け取り、機(jī)能が追加された新しいコンポーネントを返す関數(shù)です。これらを使用すると、構(gòu)造を変更せずに、複數(shù)のコンポーネント間でロジックを再利用できます。

利點(diǎn)

1. コードの再利用性: コンポーネント間で認(rèn)証やテーマなどのロジックを共有します。
2. カプセル化: 強(qiáng)化されたロジックを元のコンポーネントから分離します。

例: 認(rèn)証 HOC

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

複合成分

複合コンポーネント パターンを使用すると、連攜して動(dòng)作する複數(shù)の子コンポーネントを含む親コンポーネントを構(gòu)築できます。このパターンは、柔軟で再利用可能な UI コンポーネントを作成するのに最適です。

利點(diǎn)

1. カスタマイズ性: 子コンポーネントはさまざまな方法で組み合わせることができます。
2. 明確さ: 親コンポーネントと子コンポーネント間の関係を明確に定義します。

例: タブコンポーネント

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetchData;

1. useMemo: 計(jì)算の結(jié)果をメモ化し、依存関係が変更された場(chǎng)合にのみ再計(jì)算します。

import React from "react";
import useFetchData from "./useFetchData";

const Posts = () => {
  const { data: posts, loading } = useFetchData("/api/posts");

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

1. useCallback: 関數(shù)をメモ化します。子コンポーネントにコールバックを渡すときに役立ちます。

const initialState = { isAuthenticated: false, user: null };

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return initialState;
    default:
      return state;
  }
}

メモ化により、大規(guī)模なデータセットや複雑な UI 更新を伴うシナリオのパフォーマンスが向上し、React アプリの応答性が確保されます。

結(jié)論

React 設(shè)計(jì)パターン をマスターすることは、スケーラブルで保守可能、効率的なアプリケーションを構(gòu)築するための鍵です。 コンテナおよびプレゼンテーション コンポーネント、カスタム フック、メモ化 などのパターンを適用することで、開(kāi)発を合理化し、コードの再利用性を向上させ、パフォーマンスを向上させることができます。 高次コンポーネント、複合コンポーネント、プロバイダー パターンなどの高度なパターンにより、複雑な狀態(tài)管理とコンポーネントの相互作用がさらに簡(jiǎn)素化されます。

これらのパターンは単なる理論的なものではなく、React 開(kāi)発における現(xiàn)実世界の課題に対処し、クリーンでモジュール化されたコードを作成するのに役立ちます。これらのパターンをプロジェクトに組み込んで、堅(jiān)牢で拡張が容易で、長(zhǎng)期にわたって保守可能なアプリケーションを作成してください。ツールキットに React デザイン パターンが含まれていると、どんなに複雑でも、あらゆるプロジェクトに取り組む準(zhǔn)備が整います。
さらに詳しい情報(bào)については、Patterns.dev の React Design Patterns ドキュメントをご覧ください。

以上がReact デザイン パターン: スケーラブルなアプリケーションのベスト プラクティスの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。