React中如何全局定义react-responsive变量无需重复导入即可使用？

React生态没有类似vue-mq的全局响应式变量原生能力，推荐使用Context + 自定义Hook的方案实现需求，符合React设计规范，可维护性和稳定性更高，具体实现步骤如下：

步骤1：封装响应式上下文 #

修改你的responsive.js文件，代码如下：

import { createContext, useContext } from 'react'
import { useMediaQuery } from 'react-responsive'

// 创建上下文
const MediaQueryContext = createContext()

// 封装Provider组件，在根组件包裹整个应用
export function MediaQueryProvider({ children }) {
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  // 补充你示例中用到的桌面端判断变量
  const isDesktopOrLaptop = !isTabletOrMobile
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return (
    <MediaQueryContext.Provider 
      value={{ isBigScreen, isTabletOrMobile, isDesktopOrLaptop, isPortrait, isRetina }}
    >
      {children}
    </MediaQueryContext.Provider>
  )
}

// 封装调用用的自定义Hook
export function useMediaQueryVars() {
  return useContext(MediaQueryContext)
}

步骤2：根组件注册Provider #

在项目入口文件（通常是main.jsx/App.jsx）中用Provider包裹整个应用：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { MediaQueryProvider } from './responsive.js'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <MediaQueryProvider>
    <App />
  </MediaQueryProvider>
)

步骤3：业务组件使用 #

默认只需要导入一次自定义Hook即可获取所有响应式变量：

// A.jsx
import { useMediaQueryVars } from './responsive.js'

function A() {
  const { isDesktopOrLaptop, isBigScreen } = useMediaQueryVars()
  return <div>
    <h1>Device Test!</h1>
    {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
    {isBigScreen && <p>You have a huge screen</p>}
  </div>
}

如果你完全不想写导入语句，可以配合构建工具配置全局自动导入：

• Vite项目：安装unplugin-auto-import插件，在vite.config.js中配置该插件的imports规则，将useMediaQueryVars设置为全局自动导入的方法
• Webpack项目：可以使用webpack.ProvidePlugin或者unplugin-auto-import的webpack适配版本配置

配置完成后业务组件可以直接调用useMediaQueryVars，不需要手动写import语句，完全符合你的使用需求。

不推荐的方案 #

不建议使用挂载window全局变量或者构建工具静态注入的方式实现：这类方案无法响应窗口尺寸变化触发组件重渲染，还会导致变量追溯困难、命名冲突等问题，只适合静态常量场景，不适用于你的动态响应式需求。

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