React Hooks + Media Query 页面刷新问题答案

【问题标题】：React Hooks + Media Query page refresh issueReact Hooks + Media Query 页面刷新问题
【发布时间】：2021-03-14 20:55:22
【问题描述】：

我创建了一个响应式侧边栏，逻辑实现如下，当屏幕低于 765 像素时侧边栏自动隐藏，但问题是当我刷新低于 765 像素的页面时，侧边栏显示它看起来像这样

我的代码是这样的

function SideBar(props) {
    const {someValue} = useContext(SideBarContext);
    const {SideBarValue, SideBarWallpaperValue} = React.useContext(CounterContext);

    const [SideBarThemeValue] = SideBarValue;
    const [SideBarBackgroundValue] = SideBarWallpaperValue;

    const [sideBarOpen, setSideBarOpen] = useState(true);
    const [SideBarButtonContainer, setSideBarButtonContainer] = useState(false);

    useEffect(() => {
        window.addEventListener("resize", resize);
    })

    const resize = () => {
        if(window.innerWidth < 765) {
            setSideBarOpen(false)
            setSideBarButtonContainer(true)
        } else {
            setSideBarOpen(true)
            setSideBarButtonContainer(false)
        }
    }
    

    const showSideBar = () => {
        setSideBarOpen(!sideBarOpen)
    }

    return (
        <>
            {
                SideBarButtonContainer ? <div className={"showSideBarButtonContainer"}>
                    <img className={"showSideBarButton"} onClick={() => showSideBar()} src={SideBarMenuIcon} alt={"Open"} />
                </div> : null
            }
            <Menu isOpen={sideBarOpen}>
                
            </Menu>
        </>
    );
}

我假设当我刷新页面时，sideBarOpen 值变为 true，尽管我在 resize 方法中进行了检查，并注意到当我开始缩小屏幕时，侧边栏消失了，看起来像这样

【问题讨论】：

标签： javascript reactjs react-hooks media-queries

【解决方案1】：

侧边栏的默认状态是打开，但是您必须根据宽度计算初始状态。此外，您只能在初始渲染时调整窗口大小时初始化侦听器。

const [sideBarOpen, setSideBarOpen] = useState(() => window.innerWidth > 765);
const [SideBarButtonContainer, setSideBarButtonContainer] = useState(() => window.innerWidth < 765);

useEffect(() => {
    window.addEventListener("resize", resize);
}, []); // Only initialize listener on initial render

const resize = () => {
    if(window.innerWidth < 765) {
        setSideBarOpen(false)
        setSideBarButtonContainer(true)
    } else {
        setSideBarOpen(true)
        setSideBarButtonContainer(false)
    }
}

【讨论】：

【解决方案2】：

尝试使用useLayoutEffect 在实际渲染到屏幕之前推送一些状态更改。

useLayoutEffect(() => {
  if (window.innerWidth < 765) {
    setSideBarOpen(false);
    setSideBarButtonContainer(true);
  }  
  window.addEventListener("resize", resize);
}, [])

【讨论】：