useBreakpoints を使用して React のレスポンシブ デザインを簡素化する

最新の Web アプリケーションを構築する場合、あらゆる画面サイズでスムーズに動作するレスポンシブ デザインは、あれば便利というわけではありませんが、不可欠な機能です。これを実現する良い方法は、モバイル ビューとデスクトップ ビューを別々に処理することです。ここで useBreakpoints フックが活躍します。これは、開発者がさまざまなデバイス上でユーザーフレンドリーなエクスペリエンスを作成するのに役立つ便利なツールです。

useBreakpointsフックとは何ですか?

useBreakpoints フックは、マテリアル UI の useTheme フックと useMediaQuery フックを利用するカスタム React フックです。現在の画面サイズが決定されるため、ユーザーが携帯電話を使用しているかコンピューターを使用しているかに基づいて、何を表示するか、またはそのスタイルをどのように設定するかを決定できます。

なぜ useBreakpoints を使用するのですか?

1. ユーザー エクスペリエンスの向上: モバイル ユーザーとデスクトップ ユーザー向けにインターフェイスをカスタマイズすることで、誰もが最高のエクスペリエンスを得ることができます。モバイル ユーザーにはシンプルでスムーズなデザインが表示され、デスクトップ ユーザーにはより詳細なレイアウトをお楽しみいただけます。
2. よりシンプルなコード: CSS ファイルにメディア クエリが散在することがなくなりました。 useBreakpointsフックを使用すると、コンポーネント内でリアクティブ ロジックを直接処理できるため、コードが読みやすく、保守しやすくなります。
3. パフォーマンスの高速化: 特定の画面サイズに必要なコンテンツのみを表示することで、不要なデータの読み込みを削減し、アプリケーションを高速化できます。
4. プロジェクトの一貫性: プロジェクトで useBreakpoints フックを使用すると、一貫性が維持され、新しいチーム メンバーが迅速に開始できるようになります。

useBreakpointsフック

の使い方

ここでは、React アプリケーションで useBreakpoints フックを設定して使用する方法に関するクイックガイドを示します。

ステップ 1: フックを設定する

まず、マテリアル UI の useTheme と useMediaQuery を使用して画面サイズを決定するカスタム フックを作成します。

import { useMediaQuery, useTheme } from '@mui/material';

/**
 * 自定义钩子，根据主题获取断点的当前状态。
 */
export const useBreakpoints = () => {
  const theme = useTheme();

  const isMd = useMediaQuery(theme.breakpoints.only('md'));

  return {
    isMd,
  };
};

ステップ 2: フックを使用する

コンポーネントの useBreakpoints フックを使用して、モバイル ユーザーとデスクトップ ユーザーに異なるレイアウトを表示します。たとえば、マテリアル UI コンポーネントを使用して、モバイル ユーザーにはリストを表示し、デスクトップ ユーザーにはテーブルを表示できます。

import React from 'react';
import { useBreakpoints } from '/Users/jack/Work/SGInnovate/frontend/packages/shared/ui/utils/breakpoints';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, List, ListItem, Paper } from '@mui/material';

const ResponsiveComponent = () => {
  const { isMdDown } = useBreakpoints();

  const data = [
    { id: 1, name: 'Item 1', value: 'Value 1' },
    { id: 2, name: 'Item 2', value: 'Value 2' },
    { id: 3, name: 'Item 3', value: 'Value 3' },
  ];

  return (
    <div>
      {isMdDown ? (
        <List>
          {data.map((item) => (
            <ListItem key={item.id}>{item.name}: {item.value}</ListItem>
          ))}
        </List>
      ) : (
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Value</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>{item.name}</TableCell>
                  <TableCell>{item.value}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </div>
  );
};

export default ResponsiveComponent;

それだけです！ useBreakpoints フックを使用すると、アプリケーションを簡単に応答性が高く、ユーザーフレンドリーにすることができます。

概要

useBreakpointsフックは、React でのレスポンシブ デザインの管理を容易にする、シンプルかつ強力なツールです。さまざまな画面サイズに合わせて UI をカスタマイズすると、コードをシンプルで保守しやすく保ちながら、ユーザーにシームレスなエクスペリエンスを作成できます。複雑な Web アプリケーションを構築している場合でも、単純な Web サイトを構築している場合でも、このフックは洗練されたプロフェッショナルな結果を提供するのに役立ちます。ぜひ試してみて、アプリがプロのように適応する様子を確認してください。

以上がuseBreakpoints を使用して React のレスポンシブ デザインを簡素化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。