ホームページ > 記事 > ウェブフロントエンド > React アプリの基本的なデザイン パターン: コンポーネント ゲームのレベルアップ
React の世界にしばらく関わったことがある人なら、おそらく「それは単なる JavaScript です」というフレーズを聞いたことがあるでしょう。それは事実ですが、React アプリをより保守しやすく、再利用しやすく、実に快適に操作できるようにするために、実証済みのパターンの恩恵を受けられないというわけではありません。 React コンポーネントを「まあまあ」から「素晴らしい」レベルに引き上げる重要な設計パターンをいくつか見てみましょう!
本題に入る前に、部屋の中の象について話しましょう。そもそも、なぜデザイン パターンにこだわる必要があるのでしょうか。 React 愛好家の皆さん、デザイン パターンはコーディングの世界の秘密のレシピのようなものです。これらは、次のような一般的な問題に対する、実証済みのソリューションです。
同じページにたどり着いたので、React コンポーネントをワックスをかけたてのスポーツカーよりも輝かせるいくつかのパターンを探ってみましょう!
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> );
なぜ素晴らしいのか:
プロのヒント: コンポーネントをレゴ ブロックとして考えてください。モジュール式で構成可能であればあるほど、より素晴らしい構造を構築できるようになります!
このパターンにより、コンポーネントのロジックがそのプレゼンテーションから分離され、推論とテストが容易になります。
// 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> );
なぜ素晴らしいのか:
覚えておいてください: コンテナは演劇の舞台裏スタッフのようなもので、すべての舞台裏の作業を処理します。一方、プレゼンテーション コンポーネントは俳優であり、観客に見栄えを良くすることだけに重点を置いています。
HOC は、コンポーネントを受け取り、いくつかの機能が追加された新しいコンポーネントを返す関数です。これらはコンポーネントのパワーアップのようなものです!
const withLoader = (WrappedComponent) => { return ({ isLoading, ...props }) => { if (isLoading) { return <LoadingSpinner />; } return <WrappedComponent {...props} />; }; }; const EnhancedUserList = withLoader(UserList);
それがクールな理由:
注意事項: HOC は強力ですが、使いすぎると「ラッパー地獄」に陥る可能性があります。賢く使ってください!
このパターンには、関数をプロップとしてコンポーネントに渡すことが含まれており、レンダリングされる内容をより詳細に制御できるようになります。
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> )} />
それが気の利いた理由:
面白い事実: レンダー プロップ パターンは非常に柔軟で、これまで説明してきた他のほとんどのパターンも実装できます。
フックは 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>; };
なぜ素晴らしいのか:
プロのヒント: 複数のコンポーネントで同様のロジックを繰り返していることに気付いた場合は、それをカスタム フックに抽出する時期が来ている可能性があります!
React のデザイン パターンは、ガジェットが詰まったユーティリティ ベルトを持っているようなものです。アプリがどのような課題に直面しても、仕事に適したツールを提供します。覚えておいてください:
これらのパターンを React ツールキットに組み込むことで、より保守しやすく、再利用可能で、洗練されたコンポーネントを作成できるようになります。将来のあなた (そしてあなたのチームメイト) が、あなたの適切に構造化されたコードベースをスムーズに読み進められたら、あなたに感謝するでしょう!
コーディングを楽しんでください!
以上がReact アプリの基本的なデザイン パターン: コンポーネント ゲームのレベルアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。