如何用3个React Hooks实现响应式设计：useMedia、usePreferDarkMode终极指南

【免费下载链接】react-hooks Collection of react hooks 项目地址: https://gitcode.com/gh_mirrors/reac/react-hooks

在现代Web开发中，响应式设计已经成为必备技能。React Hooks库中的媒体查询相关hooks提供了强大的工具来简化响应式开发。本文将详细介绍如何使用useMedia、usePreferDarkMode等3个关键Hook来构建自适应的React应用，让你的网站能够智能响应不同设备和用户偏好。

📱 什么是React媒体查询Hooks？

媒体查询是CSS中用于响应式设计的重要特性，但在React中直接使用CSS媒体查询有时不够灵活。React Hooks库提供了JavaScript层面的媒体查询解决方案，让你可以在组件逻辑中直接访问设备信息。

核心优势：

• ✅ 在JavaScript中直接访问媒体查询状态
• ✅ 实时响应窗口大小变化
• ✅ 自动监听系统主题偏好变化
• ✅ 类型安全，IDE友好

🎯 useMedia Hook：基础媒体查询监听

useMedia是媒体查询功能的核心Hook，它监听指定的媒体查询字符串，并返回当前是否匹配。

基本用法示例

import { useMedia } from '@huse/media';

function ResponsiveComponent() {
    const isMobile = useMedia('(max-width: 768px)');
    const isTablet = useMedia('(min-width: 769px) and (max-width: 1024px)');
    const isDesktop = useMedia('(min-width: 1025px)');
    
    return (
        <div>
            {isMobile && <MobileLayout />}
            {isTablet && <TabletLayout />}
            {isDesktop && <DesktopLayout />}
        </div>
    );
}

常见应用场景

1. 设备类型检测 - 根据屏幕尺寸显示不同UI
2. 打印样式控制 - useMedia('print')检测打印状态
3. 高分辨率适配 - useMedia('(min-resolution: 2dppx)')适配Retina屏幕
4. 横竖屏检测 - useMedia('(orientation: landscape)')

源码位置：packages/media/src/index.ts

🌙 usePreferDarkMode Hook：深色主题检测

usePreferDarkMode是一个便捷Hook，专门用于检测用户是否偏好深色主题。

一键深色模式适配

import { usePreferDarkMode } from '@huse/media';

function ThemeAwareComponent() {
    const prefersDark = usePreferDarkMode();
    
    return (
        <div className={prefersDark ? 'dark-theme' : 'light-theme'}>
            <h1>自适应主题内容</h1>
            <p>当前主题：{prefersDark ? '深色' : '浅色'}</p>
        </div>
    );
}

实际应用价值

• 自动主题切换：根据系统设置自动调整应用主题
• 减少用户配置：提供开箱即用的主题适配
• 节能考虑：深色模式可节省OLED屏幕电量
• 无障碍支持：尊重用户系统偏好

实现原理：usePreferDarkMode内部使用了useMedia('(prefers-color-scheme: dark)')，代码位于packages/media/src/index.ts

🚀 第三个响应式Hook：useWindowSize

虽然严格来说不属于媒体查询，但useWindowSizeHook与响应式设计密切相关，通常与媒体查询配合使用。

窗口尺寸实时监控

import { useWindowSize } from '@huse/window-size';

function WindowSizeDemo() {
    const { width, height } = useWindowSize();
    
    return (
        <div>
            <p>窗口宽度：{width}px</p>
            <p>窗口高度：{height}px</p>
            <p>宽高比：{(width / height).toFixed(2)}</p>
        </div>
    );
}

与useMedia的协同使用

function ResponsiveLayout() {
    const { width } = useWindowSize();
    const isMobile = useMedia('(max-width: 768px)');
    
    // 结合使用，提供更精确的控制
    const shouldShowSidebar = width > 1024 && !isMobile;
    
    return (
        <div>
            {shouldShowSidebar && <Sidebar />}
            <MainContent />
        </div>
    );
}

🛠️ 安装与使用指南

快速安装

npm install @huse/media @huse/window-size

或者使用yarn：

yarn add @huse/media @huse/window-size

项目结构说明

React Hooks库采用模块化设计，每个Hook都有独立的包：

packages/
├── media/                    # 媒体查询相关Hooks
│   ├── src/index.ts         # useMedia, usePreferDarkMode实现
│   ├── docs/                # 文档和示例
│   └── demo/                # 演示代码
├── window-size/             # 窗口尺寸Hook
│   ├── src/index.ts         # useWindowSize实现
│   └── docs/                # 相关文档

📊 性能优化建议

1. 避免过度渲染

// ❌ 不推荐：每次渲染都创建新查询字符串
const isMobile = useMedia(`(max-width: ${breakpoint}px)`);

// ✅ 推荐：使用常量或useMemo
const mobileQuery = '(max-width: 768px)';
const isMobile = useMedia(mobileQuery);

2. 合理使用防抖

对于频繁变化的窗口尺寸，考虑添加防抖：

import { useDebounce } from '@huse/debounce';

function DebouncedResponsive() {
    const { width } = useWindowSize();
    const debouncedWidth = useDebounce(width, 100);
    
    // 使用防抖后的值
    return <div>宽度：{debouncedWidth}px</div>;
}

3. 组件拆分策略

将响应式逻辑提取到自定义Hook中：

function useResponsiveLayout() {
    const isMobile = useMedia('(max-width: 768px)');
    const isTablet = useMedia('(min-width: 769px) and (max-width: 1024px)');
    const isDesktop = useMedia('(min-width: 1025px)');
    
    return { isMobile, isTablet, isDesktop };
}

🎨 实际应用案例

案例1：响应式导航栏

function ResponsiveNavbar() {
    const { isMobile } = useResponsiveLayout();
    
    return (
        <nav>
            <Logo />
            {isMobile ? (
                <MobileMenuButton />
            ) : (
                <>
                    <NavLinks />
                    <SearchBar />
                    <UserMenu />
                </>
            )}
        </nav>
    );
}

案例2：主题切换组件

function ThemeToggle() {
    const prefersDark = usePreferDarkMode();
    const [userTheme, setUserTheme] = useState(null);
    
    const currentTheme = userTheme ?? (prefersDark ? 'dark' : 'light');
    
    return (
        <button onClick={() => setUserTheme(
            currentTheme === 'dark' ? 'light' : 'dark'
        )}>
            切换到{currentTheme === 'dark' ? '浅色' : '深色'}主题
        </button>
    );
}

🔍 调试与测试技巧

1. 浏览器开发者工具

• 使用设备模拟器测试不同屏幕尺寸
• 在控制台直接测试媒体查询：window.matchMedia('(max-width: 768px)').matches
• 切换系统主题偏好进行测试

2. 单元测试策略

// 模拟matchMedia API
beforeEach(() => {
    window.matchMedia = jest.fn().mockImplementation(query => ({
        matches: false,
        media: query,
        addListener: jest.fn(),
        removeListener: jest.fn(),
    }));
});

3. 错误处理

function SafeMediaQuery({ query, children }) {
    try {
        const matches = useMedia(query);
        return matches ? children : null;
    } catch (error) {
        console.error('媒体查询错误:', error);
        return null;
    }
}

📈 进阶应用：自定义响应式Hook

基于现有Hook创建更高级的响应式逻辑：

function useBreakpoint(breakpoints) {
    const { width } = useWindowSize();
    
    return Object.keys(breakpoints).reduce((result, key) => {
        const query = breakpoints[key];
        result[key] = useMedia(query);
        return result;
    }, {});
}

// 使用示例
function AdvancedResponsive() {
    const breakpoints = useBreakpoint({
        mobile: '(max-width: 768px)',
        tablet: '(min-width: 769px) and (max-width: 1024px)',
        desktop: '(min-width: 1025px)',
        dark: '(prefers-color-scheme: dark)',
        print: 'print'
    });
    
    // breakpoints包含所有查询结果
    return <div>当前设备：{breakpoints.mobile ? '手机' : '非手机'}</div>;
}

💡 最佳实践总结

1. 渐进增强：先构建基础功能，再添加响应式特性
2. 移动优先：从小屏幕开始设计，逐步适配大屏幕
3. 性能意识：避免不必要的媒体查询监听
4. 用户体验：尊重用户系统偏好，特别是主题设置
5. 代码组织：将响应式逻辑提取到自定义Hook中

🚀 开始使用

现在你已经了解了React Hooks库中媒体查询相关Hook的强大功能。这些工具能够显著简化响应式开发流程，让你的React应用更加智能和用户友好。

核心收获：

• useMedia：通用的媒体查询监听器
• usePreferDarkMode：便捷的深色主题检测
• useWindowSize：窗口尺寸实时监控

通过合理组合这些Hook，你可以构建出既美观又功能强大的响应式React应用。立即尝试这些Hook，提升你的开发效率和用户体验吧！

【免费下载链接】react-hooks Collection of react hooks 项目地址: https://gitcode.com/gh_mirrors/reac/react-hooks