React アプリの基本的なデザインパターン: コンポーネントゲームのレベルアップ-jsチュートリアル-php.cn

React アプリの基本的なデザインパターン: コンポーネントゲームのレベルアップ

Mary-Kate Olsen

リリース： 2024-09-27 10:51:02

オリジナル

881 人が閲覧しました

Essential Design Patterns for React Apps: Leveling Up Your Component Game

React の世界にしばらく関わったことがある人なら、おそらく「それは単なる JavaScript です」というフレーズを聞いたことがあるでしょう。それは事実ですが、React アプリをより保守しやすく、再利用しやすく、実に快適に操作できるようにするために、実証済みのパターンの恩恵を受けられないというわけではありません。 React コンポーネントを「まあまあ」から「素晴らしい」レベルに引き上げる重要な設計パターンをいくつか見てみましょう!

React でデザインパターンが重要な理由

本題に入る前に、部屋の中の象について話しましょう。そもそも、なぜデザインパターンにこだわる必要があるのでしょうか。 React 愛好家の皆さん、デザインパターンはコーディングの世界の秘密のレシピのようなものです。これらは、次のような一般的な問題に対する、実証済みのソリューションです。

コードをより読みやすく、保守しやすくします
アプリケーション全体での再利用性を促進する
洗練されたソリューションで複雑な問題を解決します
他の開発者とより効果的にアイデアをコミュニケーションできるようにします

同じページにたどり着いたので、React コンポーネントをワックスをかけたてのスポーツカーよりも輝かせるいくつかのパターンを探ってみましょう!

1. コンポーネントの構成パターン

React のコンポーネントモデルは、それ自体がすでに強力なパターンですが、さらに一歩進めて構成することで、より柔軟で再利用可能なコードを作成できます。

// Instead of this:
const Button = ({ label, icon, onClick }) => (
  <button onClick={onClick}>
    {icon && <Icon name={icon} />}
    {label}
  </button>
);

// Consider this:
const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

const IconButton = ({ icon, label }) => (
  <Button>
    <Icon name={icon} />
    {label}
  </Button>
);

ログイン後にコピー

なぜ素晴らしいのか:

より柔軟で再利用可能なコンポーネント
カスタマイズと拡張が簡単になりました
単一責任の原則に従います

プロのヒント: コンポーネントをレゴブロックとして考えてください。モジュール式で構成可能であればあるほど、より素晴らしい構造を構築できるようになります!

2. コンテナ/プレゼンテーションのパターン

このパターンにより、コンポーネントのロジックがそのプレゼンテーションから分離され、推論とテストが容易になります。

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

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

// Presentational Component
const UserList = ({ users }) => (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

ログイン後にコピー

なぜ素晴らしいのか:

懸念事項を明確に分離
テストと保守が簡単になりました
プレゼンテーションコンポーネントの再利用性を促進します

覚えておいてください: コンテナは演劇の舞台裏スタッフのようなもので、すべての舞台裏の作業を処理します。一方、プレゼンテーションコンポーネントは俳優であり、観客に見栄えを良くすることだけに重点を置いています。

3. 高次コンポーネント (HOC) パターン

HOC は、コンポーネントを受け取り、いくつかの機能が追加された新しいコンポーネントを返す関数です。これらはコンポーネントのパワーアップのようなものです!

const withLoader = (WrappedComponent) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return <LoadingSpinner />;
    }
    return <WrappedComponent {...props} />;
  };
};

const EnhancedUserList = withLoader(UserList);

ログイン後にコピー

それがクールな理由:

さまざまなコンポーネント間でコードを再利用できます
コンポーネントをクリーンかつ集中的に保ちます
複数の強化用に構成可能

注意事項: HOC は強力ですが、使いすぎると「ラッパー地獄」に陥る可能性があります。賢く使ってください!

4. レンダープロップパターン

このパターンには、関数をプロップとしてコンポーネントに渡すことが含まれており、レンダリングされる内容をより詳細に制御できるようになります。

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return (
    <div onMouseMove={handleMouseMove}>
      {render(position)}
    </div>
  );
};

// Usage
<MouseTracker
  render={({ x, y }) => (
    <h1>The mouse is at ({x}, {y})</h1>
  )}
/>

ログイン後にコピー

それが気の利いた理由:

柔軟性が高く再利用可能
プロップ名の衝突などの HOC の問題を回避します
提供された関数に基づいて動的レンダリングを可能にします

面白い事実: レンダープロップパターンは非常に柔軟で、これまで説明してきた他のほとんどのパターンも実装できます。

5. カスタムフックパターン

フックは React のブロックの新しい子であり、カスタムフックを使用すると、コンポーネントロジックを再利用可能な関数に抽出できます。

const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // Set initial size

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
};

// Usage
const MyComponent = () => {
  const { width, height } = useWindowSize();
  return <div>Window size: {width} x {height}</div>;
};

ログイン後にコピー

なぜ素晴らしいのか: