スケーラブルで効率的なアプリのためにすべての開発者が知っておくべき主要な React 設計パターン

React がフロントエンド エコシステムを支配し続ける中、その設計パターンをマスターすることで、アプリケーションの効率とスケーラビリティを大幅に向上させることができます。 React デザイン パターンは、コンポーネントの整理と構造化、状態の管理、プロパティの処理、再利用性の向上に関するベスト プラクティスを提供します。このブログでは、開発プロセスを良好な状態から優れた状態に導くことができる、いくつかの主要な React 設計パターンを探っていきます。

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

React の基本的なパターンの 1 つは プレゼンテーション コンポーネントとコンテナ コンポーネント パターンです。これはすべて関心事を分離することを目的としています。

• プレゼンテーション コンポーネント: これらのコンポーネントは、物事の見た目を決定します。これらは props を通じてデータとコールバックを受け取りますが、独自のロジックを持ちません。その唯一の目的は、UI をレンダリングすることです。

• コンテナ コンポーネント: これらのコンポーネントは、動作の仕組みを管理します。これらにはロジックが含まれており、状態を管理し、データのフェッチやイベント処理を処理します。コンテナ コンポーネントはデータをプレゼンテーション コンポーネントに渡します。

// Presentational Component
const UserProfile = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

// Container Component
const UserProfileContainer = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: 'john@example.com' });

  return <UserProfile user={user} />;
};

このパターンは懸念事項の分離を促進し、コードの保守とテストを容易にします。

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

高次コンポーネント (HOC) は、コンポーネント ロジックを再利用するための強力な設計パターンです。 HOC は、コンポーネントを受け取り、強化された動作または追加された機能を備えた新しいコンポーネントを返す関数です。

このパターンは、認証、テーマ設定、データの取得などの横断的な問題によく使用されます。

// Higher-Order Component for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // logic to check auth;

    if (!isAuthenticated) {
      return <div>You need to log in!</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Usage
const Dashboard = () => <div>Welcome to the dashboard</div>;
export default withAuth(Dashboard);

HOC は、複数のコンポーネント間で再利用可能なロジックを有効にすることにより、DRY (Don't Reply Yourself) 原則を推進します。

3. プロップをレンダリングする

Render Props パターンでは、関数をプロップとしてコンポーネントに渡し、その関数に基づいてコンテンツを動的にレンダリングできるようにします。これは、HOC を使用せずにコンポーネント間でステートフル ロジックを共有する場合に特に役立ちます。

// Render Prop Component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

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

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// Usage
const App = () => (
  <MouseTracker render={({ x, y }) => <h1>Mouse position: {x}, {y}</h1>} />
);

このパターンでは、ロジックを UI から分離することで柔軟性が得られ、コンポーネントの再利用性とカスタマイズ性が向上します。

4. 複合成分

Compound Component パターンは、react-select や React-table などのライブラリでよく使用されます。これにより、親コンポーネントが子コンポーネントのグループを制御できるようになります。このパターンは、再利用可能な動的インターフェイスを構築する際の柔軟性を促進します。

// Compound Component
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div>
      <div>
        {children.map((child, index) => (
          <button key={index} onClick={() => setActiveTab(index)}>
            {child.props.title}
          </button>
        ))}
      </div>
      <div>{children[activeTab]}</div>
    </div>
  );
};

// Usage
<Tabs>
  <div title="Tab 1">Content of Tab 1</div>
  <div title="Tab 2">Content of Tab 2</div>
</Tabs>;

このパターンは、コンポーネントの柔軟性とカスタマイズ性を維持しながら、親子通信のためのクリーンな API を提供します。

5. 制御されたコンポーネントと制御されていないコンポーネント

React では、フォーム入力を管理する 2 つの方法、制御コンポーネント と 非制御コンポーネント を提供します。

• 制御されたコンポーネント: これらのコンポーネントは、props を介して React によって状態が完全に制御されるため、より予測可能になります。

• 制御されていないコンポーネント: これらのコンポーネントは、ref に依存して DOM を直接操作するため、制御性は低くなりますが、パフォーマンスは向上する可能性があります。

// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState('');

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return <input ref={inputRef} />;
};

これらのパターンのどちらを選択するかは、きめ細かい制御が必要か、それとも軽量のパフォーマンス最適化が必要かによって異なります。

6. カスタムフック

React Hooks を使用すると、再利用可能な方法でカスタム ロジックを構築できます。共通のロジックをカスタム フックに抽出することで、コードの重複を回避し、コードベースをよりモジュール化できます。

// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

  return { data, error };
};

// Usage
const DataFetchingComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>Loading...</p>;

  return <div>{data.someField}</div>;
};

カスタムフックを使用すると、懸念事項をより適切に分離し、宣言的な方法で共通の機能を再利用できます。

結論

デザイン パターンは、クリーンで保守可能、スケーラブルな React アプリケーションを作成する上で重要な部分です。プレゼンテーション コンポーネントやコンテナ コンポーネント、HOC、レンダー プロップ、複合コンポーネント、カスタム フックなどのパターンを活用することで、コードが柔軟で再利用可能で、理解しやすいものになるようにします。

これらのパターンを理解して実装すると、開発ワークフローが大幅に改善され、React プロジェクトがより組織化され、効率的になります。それらを次のプロジェクトに組み込んで、コードの品質と保守性の両方の違いを体験してください!

以上がスケーラブルで効率的なアプリのためにすべての開発者が知っておくべき主要な React 設計パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。