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
然后尽量保持在服务端渲染时数据一致 react-responsive的useMediaQuery是怎么实现的呢? 王一之 发表于 2023-12-1 10:10
react-responsive的useMediaQuery是怎么实现的呢?
好问题了
忘了
但是大家都说性能好 李恒道 发表于 2023-12-1 10:15
好问题了
忘了
但是大家都说性能好
哥哥看看实现呗
页:
[1]