上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    669

    主题

    5362

    回帖

    6270

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6270

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-12-1 06:30:08 | 显示全部楼层 | 阅读模式

    因为媒体查询客户端和服务端媒体查询的结果不同
    如果根据媒体查询结果进行计算
    客户端与服务端的结果不一致
    此时如果是显示内容会正常渲染
    但是如果是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
    然后尽量保持在服务端渲染时数据一致

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    296

    主题

    4002

    回帖

    3894

    积分

    管理员

    积分
    3894

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2023-12-1 10:10:53 | 显示全部楼层
    react-responsive的useMediaQuery是怎么实现的呢?
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    669

    主题

    5362

    回帖

    6270

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6270

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-12-1 10:15:38 | 显示全部楼层
    王一之 发表于 2023-12-1 10:10
    react-responsive的useMediaQuery是怎么实现的呢?

    好问题了
    忘了
    但是大家都说性能好
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    296

    主题

    4002

    回帖

    3894

    积分

    管理员

    积分
    3894

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2023-12-1 10:26:41 | 显示全部楼层
    李恒道 发表于 2023-12-1 10:15
    好问题了
    忘了
    但是大家都说性能好

    哥哥看看实现呗
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表