再利用可能なリストコンポーネントを使用した React アプリのスケーリング

React でスケーラブルなアプリケーションを構築するには、単なる堅固なビジネス ロジック以上のものが必要です。コンポーネントのアーキテクチャは、アプリケーションの成長に応じてアプリケーションの保守性、パフォーマンス、柔軟性がどの程度向上するかにおいて重要な役割を果たします。多くの Web アプリケーションにおける基本的なタスクの 1 つは、データのリストを処理することです。製品リスト、テーブル、ダッシュボードのいずれをレンダリングする場合でも、繰り返し可能で再利用可能なリスト構造を必要とするシナリオに遭遇することがよくあります。

再利用可能なリスト コンポーネントを構築することで、コードベースの複雑さを大幅に軽減しながら、保守性とスケーラビリティを向上させることができます。このブログ投稿では、React で再利用可能なリスト コンポーネントを構築する方法と、それがアプリケーションのスケーリングにとって重要である理由を探り、プロセスのガイドとなる広範なコード例を提供します。

React アプリのスケーリングにおいて再利用性が重要である理由

React アプリをスケーリングする場合、再利用性が鍵となります。アプリ全体でさまざまなリスト コンポーネントを処理するコードを複製する代わりに、再利用可能なリスト コンポーネントを構築すると、共通のロジックと UI 構造をスタンドアロン コンポーネントに抽象化できます。これにより、React コンポーネントをモジュール形式で拡張できるようになり、アプリの拡張に伴う潜在的なバグやメンテナンスの問題につながる可能性があるコードの重複を防ぐことができます。

再利用可能なコンポーネントを作成すると、さまざまな props を渡してリストのレンダリングを制御できるため、ユースケースごとに同じロジックを書き直すことなく、アプリケーションをより動的かつ柔軟にすることができます。このアプローチにより、アプリがスケーラブルになるだけでなく、コードの可読性と保守性が簡素化されて開発者のエクスペリエンスも向上します。

再利用可能なリストコンポーネントの中心的な概念

スケーラブルで再利用可能なリスト コンポーネントを構築するには、いくつかの React の概念を理解する必要があります。

プロパティと状態: これらを使用すると、それぞれコンポーネントにデータを渡し、コンポーネントの内部動作を制御できます。

配列メソッド: .map()、.filter()、.reduce() などのメソッドは、React コンポーネントで配列を変換するために不可欠です。

継承よりも合成: React では、合成パターンが継承よりも優先されます。より小さく再利用可能なコンポーネントを組み合わせて、複雑な UI を構築できます。

プロパティ駆動型 UI: 再利用可能なリスト コンポーネントはプロパティによって駆動される必要があります。これにより、親コンポーネントからさまざまなデータ、レンダリング ロジック、さらにはスタイルを渡すことができます。

例 1: 単純な再利用可能なリスト コンポーネント

まず、アイテムの配列をプロップとして受け入れ、それらを動的にレンダリングできる、シンプルで再利用可能なリスト コンポーネントを作成しましょう。

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    ff6d136ddc5fdfeffaf53ff6ee95f185
      {items.map((item, index) => (
        ba933d1ba6eb3b125bac48a5e6256165{item}bed06894275b65c1ab86501b08a632eb
      ))}
    929d1f5ca49e04fdcb27f9465b944689
  );
};

export default SimpleList;

この例では、SimpleList は配列である items プロパティを受け入れます。 .map() 関数を使用して配列を反復処理し、順序なしリスト (

) 内の各項目をレンダリングします。

)。各項目は
• 要素で囲まれています。 key prop により、リストが変更されたときに React が DOM を効率的に更新できるようになります。

  使用例:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      <div>
        <h1>Fruit List</h1>
        <SimpleList items={fruits} />
      </div>
    );
  };
  
  export default App;
  

  この例では、果物の基本的なリストをレンダリングします。このコンポーネントは十分に柔軟なので、任意のデータ配列を渡すことができます。

  リストコンポーネントの再利用性の強化

  上記の例は機能しますが、非常に制限されています。実際のアプリケーションでは、条件付きでリスト項目をレンダリングしたり、カスタム スタイルを適用したり、個々の項目にイベント リスナーを追加したりするなど、より複雑な要件を処理する必要があることがよくあります。

  レンダリング プロパティを介してカスタム レンダリング ロジックを許可することで、SimpleList をより再利用しやすくしましょう。

  例 2: カスタム リスト レンダリングにレンダー プロップを使用する

  Render props は、コンポーネント内でレンダリングされる内容を制御できる React のパターンです。このパターンを使用してリスト項目のカスタム レンダリングを可能にする方法は次のとおりです:
  

  const ReusableList = ({ items, renderItem }) => {
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {renderItem(item)}
          </li>
        ))}
      </ul>
    );
  };
  

  この場合、ReusableList コンポーネントは、項目を取得して JSX を返す関数である renderItem prop を受け入れます。これにより、各リスト項目のレンダリング方法を制御する柔軟な方法が提供されます。

  使用例:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      <div>
        <h1>User List</h1>
        <ReusableList
          items={users}
          renderItem={(user) => (
            <div>
              <h2>{user.name}</h2>
              <p>Age: {user.age}</p>
            </div>
          )}
        />
      </div>
    );
  };
  

  この例では、renderItem プロパティを使用して、各ユーザーの表示方法をカスタマイズできます。これで、特定のユースケースに従ってレンダリングして、任意のデータ構造に対して同じリスト コンポーネントを再利用できるようになりました。

  例 3: リスト コンポーネントを高次コンポーネントで拡張可能にする

  React のもう 1 つの強力なパターンは、高次コンポーネント (HOC) です。 HOC は、コンポーネントを受け取り、追加の機能を備えた新しいコンポーネントを返す関数です。

  たとえば、データのフェッチや条件付きレンダリングなどの追加の動作で ReusableList を強化したい場合は、HOC を使用できます。
  

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return <p>Loading...</p>;
      return <Component {...props} />;
    };
  };
  

  ここで、withLoading HOC は、任意のコンポーネントに読み込み動作を追加します。これを ReusableList に適用しましょう:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      <div>
        <h1>User List</h1>
        <EnhancedList
          isLoading={isLoading}
          items={users}
          renderItem={(user) => (
            <div>
              <h2>{user.name}</h2>
              <p>Age: {user.age}</p>
            </div>
          )}
        />
      </div>
    );
  };
  

  In this example, the withLoading HOC wraps around ReusableList, adding loading state management to it. This pattern promotes code reuse by enhancing components with additional logic without modifying the original component.

  Example 4: Advanced List Components with Hooks

  With React hooks, we can take reusable list components to another level by integrating stateful logic directly into the components. Let’s build a reusable list that can handle pagination.
  

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage + 1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  The usePagination hook encapsulates pagination logic. We can now use this hook within our list component.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      <div>
        <ul>
          {currentItems.map((item, index) => (
            <li key={index}>{renderItem(item)}</li>
          ))}
        </ul>
        <div>
          <button onClick={prevPage} disabled={currentPage === 1}>
            Previous
          </button>
          <button onClick={nextPage} disabled={currentPage === maxPage}>
            Next
          </button>
        </div>
      </div>
    );
  };
  

  Usage Example:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
  
    return (
      <div>
        <h1>Paginated List</h1>
        <PaginatedList
          items={items}
          itemsPerPage={10}
          renderItem={(item) => <div>{item}</div>}
        />
      </div>
    );
  };
  

  This example demonstrates a paginated list where users can navigate through pages of items. The hook handles all pagination logic,

  making it reusable across different components.

  Conclusion

  Building reusable list components in React is a fundamental practice for creating scalable applications. By abstracting common logic, using patterns like render props, higher-order components, and hooks, you can create flexible, extensible, and maintainable list components that adapt to different use cases.

  As your React application grows, adopting reusable components not only simplifies your codebase but also enhances performance, reduces redundancy, and enables rapid iteration on new features. Whether you're handling simple lists or more complex UI requirements, investing time in creating reusable components will pay off in the long run.

  References

  React Official Documentation
  
  React Render Props
  
  React Higher-Order Components
  
  React Hooks

以上が再利用可能なリストコンポーネントを使用した React アプリのスケーリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。