再利用可能なリストコンポーネントを使用した React アプリのスケーリング-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-09-10 20:33:02

オリジナル

840 人が閲覧しました

Scaling React Apps with Reusable List Components

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 (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

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