useMediaQuery

AI Engineer

实现一个 useMediaQuery Hook，用于订阅并响应媒体查询的变化（例如屏幕大小、分辨率、方向等）。

export default function Component() {
  const isSmallDevice = useMediaQuery('only screen and (max-width: 768px)');

  return <div>{isSmallDevice && <a href="#">Menu</a>}</div>;
}

提示：window.matchMedia API 可能会有所帮助。

参数

query: string：要匹配的媒体查询。它必须是有效的 CSS 媒体查询字符串

返回值

该 Hook 返回一个布尔值，指示媒体查询是否匹配。

类似问题

解决方案

window.matchMedia(query) 是一个 JavaScript 方法，用于检查文档是否与给定的 CSS 媒体查询匹配。它返回一个 MediaQueryList 对象，该对象提供：

.matches (布尔值)：指示文档当前是否与媒体查询匹配
.addEventListener("change", callback)：侦听媒体查询匹配状态的变化
.removeEventListener("change", callback)：在不再需要时删除事件侦听器

例子：

const mediaQuery = window.matchMedia('(max-width: 768px)');

if (mediaQuery.matches) {
  console.log('视口为 768px 或更小');
}

mediaQuery.addEventListener('change', (e) => {
  console.log(e.matches ? '现在是小屏幕' : '现在是大屏幕');
});

useMediaQuery 是一个 hook，它允许 React 应用程序利用此浏览器 API 并响应媒体变化（例如屏幕大小、分辨率、方向等）。

方法 1：`useEffect` 和 `useState`

可以使用 useState hook 存储当前的媒体查询匹配项，并使用 useEffect hook 在媒体查询更改时更新匹配项来实现 useMediaQuery hook。我们可以将侦听器附加到 window.matchMedia(...) 返回的 MediaQueryList 对象上的 change 事件以更新匹配状态。

import { useEffect, useState } from 'react';

export default function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(
    () => window.matchMedia(query).matches,
  );

  useEffect(() => {
    const mediaQueryList = window.matchMedia(query);

    function updateMatch() {
      setMatches(mediaQueryList.matches);
    }

    mediaQueryList.addEventListener('change', updateMatch);

    return () => {
      mediaQueryList.removeEventListener('change', updateMatch);
    };
  }, [query]);

  return matches;
}

方法 2：`useSyncExternalStore`

React 的 useSyncExternalStore hook 更好，因为它旨在将 React 状态与外部系统同步，例如订阅原生浏览器 API。

import { useCallback, useSyncExternalStore } from 'react';

export default function useMediaQuery(query: string): boolean {
  const subscribe = useCallback(
    (callback: () => void) => {
      const mediaQueryList = window.matchMedia(query);

      mediaQueryList.addEventListener('change', callback);

      return () => {
        mediaQueryList.removeEventListener('change', callback);
      };
    },
    [query],
  );

  return useSyncExternalStore(
    subscribe,
    () => window.matchMedia(query).matches,
  );
}

useMediaQuery

参数

返回值

useMediaQuery

参数

返回值

类似问题

解决方案

方法 1：`useEffect` 和 `useState`

方法 2：`useSyncExternalStore`

您必须登录才能查看您的提交

正在加载编辑器

正在加载编辑器

加载测试

JavaScript 控制台

加载测试

useMediaQuery

参数

返回值

useMediaQuery

参数

返回值

类似问题

解决方案

方法 1：useEffect 和 useState

方法 2：useSyncExternalStore

您必须登录才能查看您的提交

正在加载编辑器

正在加载编辑器

加载测试

JavaScript 控制台

加载测试

方法 1：`useEffect` 和 `useState`

方法 2：`useSyncExternalStore`