React の useBreakpoints フックでブレークポイントを克服する

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

useBreakpointsフックとは何ですか?

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

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

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

useBreakpointsフック

の使い方

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

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

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

<code class="language-javascript">import { useMediaQuery, useTheme } from '@mui/material';

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

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

  return {
    isMd,
  };
};</code>

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

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

<code class="language-javascript">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;</code>

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

概要

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

以上がReact の useBreakpoints フックでブレークポイントを克服するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。