如何优化MUI响应式逻辑？避免重复声明isMobile变量

对于你现在的需求，自定义Hook是最优解——逻辑封装直接，没有额外复杂度，完全满足“一处定义、多处导入使用”的需求。

自定义Hook实现方案 #

创建一个独立的Hook文件（比如useIsMobile.js），把重复的逻辑封装进去：

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

export function useIsMobile() {
  const theme = useTheme();
  // 统一定义断点，后续修改只需改这一行
  return useMediaQuery(theme.breakpoints.down("sm"));
}

之后所有需要判断移动端的组件，直接导入这个Hook即可：

import { useIsMobile } from './useIsMobile';

function Component1() {
  const isMobile = useIsMobile();
  // 你的组件逻辑
}

function Component2() {
  const isMobile = useIsMobile();
  // 你的组件逻辑
}

什么时候考虑用Context？ #

Context更适合需要在多层嵌套的组件中共享多个响应式状态的场景（比如同时需要isMobile、isTablet、isDesktop），而且不想每个组件都单独导入Hook。但就你当前只需要isMobile的情况，Context会增加不必要的Provider嵌套和组件树复杂度，完全没必要。

如果非要用Context，示例如下（仅作参考）：

// 创建ResponsiveContext.js
import { createContext, useContext } from 'react';
import { useMediaQuery, useTheme } from "@mui/material";

const ResponsiveContext = createContext();

export function ResponsiveProvider({ children }) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  // 可扩展更多状态，比如isTablet、isDesktop
  return (
    <ResponsiveContext.Provider value={{ isMobile }}>
      {children}
    </ResponsiveContext.Provider>
  );
}

export function useResponsive() {
  return useContext(ResponsiveContext);
}

在根组件包裹Provider：

import { ResponsiveProvider } from './ResponsiveContext';

function App() {
  return (
    <ResponsiveProvider>
      {/* 所有需要使用响应式状态的组件都放在这里面 */}
      <Component1 />
      <Component2 />
    </ResponsiveProvider>
  );
}

组件中使用：

import { useResponsive } from './ResponsiveContext';

function Component1() {
  const { isMobile } = useResponsive();
  // 你的组件逻辑
}

总结 #

• 仅需isMobile单个状态、组件层级不深：选自定义Hook，简单直接。
• 需要共享多个响应式状态、大量深层组件需要使用：考虑Context。

内容的提问来源于stack exchange，提问作者Brenden Baio