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

Question

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

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

according to the doc，MediaQueries 接受两个参数：

useMediaQuery(query, [options]) => matches

其选项之一是 noSsr，即：

options.noSsr (Boolean [optional]): Defaults to false. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to true if you are not doing server-side rendering.

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

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

working example in sandbox

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

React Material UI can't find mobile device on first render

reactjs

material-ui

responsive