React Material UI 在首次渲染时找不到移动设备

Question

我material ui在我的REACT pwa. 当我尝试在移动设备中打开应用程序时，初始化时不会检测到屏幕尺寸。因此，我的树将渲染两次，并且我看到屏幕随着动态响应变化而闪烁。

import { useMediaQuery, useTheme } from "@material-ui/core";
import { useRef } from "react";

export default function App() {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("xs"));

    const render=useRef(0);

    console.log(++render.current);
    console.log('material answering to is mobile:',isMobile)

    return (
        <div/>
    )
}

难道还有什么我不知道的事吗？

Answer 1

根据文档，MediaQueries 接受两个参数：

useMediaQuery(query, [options]) => matches

它的选项之一是 noSsr ，即：

options.noSsr（布尔值[可选]）：默认为 false。为了执行服务器端渲染协调，需要渲染两次。第一次什么都没有，第二次带着孩子。这种双通道渲染周期有一个缺点。速度比较慢。如果您不进行服务器端渲染，则可以将此标志设置为 true。

因此，如果您想防止此行为，请将其设置为 true，如下所示：

const isMobile = useMediaQuery(theme.breakpoints.down("xs"), {
    noSsr: true
  });

沙箱中的工作示例