react SSR媒体查询class不发生改变

李恒道

因为媒体查询客户端和服务端媒体查询的结果不同
如果根据媒体查询结果进行计算
客户端与服务端的结果不一致
此时如果是显示内容会正常渲染
但是如果是classNames等内容就不会发生改变
此时只能先声明一个useState变量
然后再设置数据，如
useMediaQuery为react-responsive库

export function useMediaQueryState(settings: MediaQuerySettings) {
  const mediaQuery = useMediaQuery(settings);
  const [mediaState, setMediaState] = useState(mediaContext);
  useEffect(() => {
    setMediaState(mediaQuery);
  }, [mediaQuery]);
  return mediaState;
}

关于SSR媒体查询抖动的问题
目前找到的还算影响较少的方案的是使用ua-parser-js库对UA进行解析判断是mobile或desktop
然后尽量保持在服务端渲染时数据一致

王一之

react-responsive的useMediaQuery是怎么实现的呢？

李恒道

王一之 发表于 2023-12-1 10:10
react-responsive的useMediaQuery是怎么实现的呢？

好问题了
忘了
但是大家都说性能好

王一之

李恒道 发表于 2023-12-1 10:15
好问题了
忘了
但是大家都说性能好

哥哥看看实现呗