李恒道 发表于 2023-12-1 06:30:08

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

因为媒体查询客户端和服务端媒体查询的结果不同
如果根据媒体查询结果进行计算
客户端与服务端的结果不一致
此时如果是显示内容会正常渲染
但是如果是classNames等内容就不会发生改变
此时只能先声明一个useState变量
然后再设置数据,如
useMediaQuery为react-responsive库
```js
export function useMediaQueryState(settings: MediaQuerySettings) {
const mediaQuery = useMediaQuery(settings);
const = useState(mediaContext);
useEffect(() => {
    setMediaState(mediaQuery);
}, );
return mediaState;
}
```
关于SSR媒体查询抖动的问题
目前找到的还算影响较少的方案的是使用ua-parser-js库对UA进行解析判断是mobile或desktop
然后尽量保持在服务端渲染时数据一致

王一之 发表于 2023-12-1 10:10:53

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

李恒道 发表于 2023-12-1 10:15:38

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

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

王一之 发表于 2023-12-1 10:26:41

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

哥哥看看实现呗
页: [1]
查看完整版本: react SSR媒体查询class不发生改变