文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【React】377- 实现 React 中的状态自动保存

假设有下述场景： 移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页...周期进行数据恢复 在需要保存的状态较少时，这种方式可以比较快地实现我们所需功能，但在数据量大或者情况多变时，手动保存状态就会变成一件麻烦事了 作为程序员，当然是尽可能懒啦，为了不需要每次都关心如何对数据进行保存恢复...，我们需要研究如何自动保存状态 通过路由实现自动状态保存（通常使用 react-router） 既然 React 中状态的丢失是由于路由切换时卸载了组件引起的，那可以尝试从路由机制上去入手，改变路由对组件的渲染行为...都无法避免路由在不匹配时被卸载掉的命运 但将 children 属性当作方法来使用，我们就有手动控制渲染的行为的可能，关键代码在此处 https://github.com/ReactTraining/react-router...render(props) : null // 使用 render 属性无法阻止组件的卸载 : null // 使用 component 属性无法阻止组件的卸载

2.9K30

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

// //定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同 // anchors: ["page1","page2","page3"]...，但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部的padding，当我们要设置一个固定在顶部的菜单、导航、元素等时使用...', '#ba5be9', '#b4b8ab'] } 怎么调用api click() { // vue调用fullpapge的方法 this....// //定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同 // anchors: ["page1","page2","page3"]...，但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部的padding，当我们要设置一个固定在顶部的菜单、导航、元素等时使用

11.9K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CSS深入理解学习笔记之overflow

    2、Overflow与滚动条 滚动条的出现条件：①auto/scroll；②内容超过盒子。...滚动条的宽度机制： 　　　　滚动条会占用容器的可用宽度或高度。 ?...6、overflow与锚点技术 　　（1）锚链和锚点 　　　　锚链：就是我们url中常见的“#XXXX”。 　　　　锚点：就是标签的ID。 　　　　锚点定位：通过锚链定位锚点位置。 　　...（2）锚点定位的本质 　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。 　　　　前提：①容器可滚动；②锚点元素在容器内。 　　...（3）锚点定位的触发 　　　　①url地址中的锚链与锚点元素； 　　　　②可focus的锚点元素处于focus状态； 　　（4）锚点定位的作用 　　　　①快速定位 　　　　②选项卡技术 　　　　③单页应用

    4.2K50

    关于React中状态保存的研究

    在使用react搭配react-router做应用的时候，你可能遇到这样的问题，当我从第一个页面过渡到第二个页面，然后返回之后，发现之前的页面的状态全部不见了，即回到了初始的状态。...可以看到，当从详情页面返回时，点击的激活状态依旧可以保存，但是列表滚动的高度并不能够保存，关于高度的恢复在下面会讲到。 解决方案二：当前页面弹窗 不占用路由，在当前页面直接已弹窗的形式加载详情页面。...效果和字路由方式相同，依然存在滚动高度不能保存的问题。 滚动高度问题 下面来谈谈如何解决滚动高度的问题，综合起来还是一种恢复现场的方式。...在页面即将离开之前，保存之前的scrollTop值，然后再次回到这个页面的时候，恢复滚动高度即可。...尝试方案：react-keeper 在github上搜索看到了这个库，类似于react-router的一个翻版，同时在react-router的基础上增加了类似于vue-router中的keep-alive

    4.3K40

    实现流畅的页面切换？日本的前端教教你...

    后退后没有恢复到上次的滚动位置 SPA应用中经常遇到这种问题。虽然可以通过JavaScript暂存滚动位置进行恢复，但是这种实现并不简单，很容易产生页面的上下跳动等不流畅的问题。...另外除了垂直滚动位置之外，滚动图等水平方向上的滚动，以及无限加载等情况也会存在，这样以来JavaScript的逻辑会变得越来越复杂。...懒加载的图片会重新加载 图片在滚动到可显示位置时才予以加载，除此之外用一个placeholder来占位 - 这是一种常见的优化手段。但是在页面后退的时候，图片会重新现实一次，有些违和。...这些问题用一句话总结一下就是「在页面后退的时候，之前页面中因为滚动・点击等用户行为所产生的DOM变化如何重现」 参考IOS的实现 为了看起来像原生app，那么我们最好参考一下原生app的实现。...（顺便说一下Modal的也是通过Stack进行管理） 接下来说明下JavasScript的实现（以React和react-router为例，部分代码省略） PageStack的实现 作为wrapper

    61710

    fullPage.js全屏滚动插件

    参数设置 传递对象形式 参数 说明 resize (true/false)字体是否随着窗口缩放而缩放 slidesColor 设置背景颜色 anchors (array)定义锚链接 scrollingSpeed...（int） 设置滚动速度，单位为毫秒 easing （striing）滚动动画方式 menu (true/false) 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动...() 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 为序号，从1开始计算 onLeave() 滚动前的回调函数...、index、slideIndex、direction 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex...、direction 4个参数 7.demo <!

    15K20

    从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等

    标题标签：,,,4>4>,, h1 在一个页面里只能出现一次。...1、锚链接 我们先搞清楚什么是锚链接： 锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示.../xxx.rar"> PS：不推荐使用 4、超链接优化写法 // 让所有的超链接都在新窗口打开 PS：写的位置在 head 里面。...​ alternate：在两端之间来回滚动 ​ scroll：由一端滚动到另一端，会重复 ​ slide：由一端滚动到另一端，不会重复 direction：设置滚动的方向 ​ left |...图标 ---- 八、小结 今天将的内容是：标签、超链接、特殊符号、列表、音乐标签、滚动标签、和 head 里面相关知识点。

    2.6K20

    react-router学习笔记

    react-router学习笔记 author: @TiffanysBear 基本介绍 React Router 是完整的 React 路由解决方案 React Router 保持 UI 与 URL...（用来作为恢复 location state 的唯一 key 标识） 当一个 history 通过应用程序的 push 或 replace 跳转时，它可以在新的 location 中存储 “location...当访客点击“后退”和“前进”时，我们就会有一个机制去恢复这些 location state。 createMemoryHistory Memory history 不会在地址栏被操作或读取。...现在动画的思路比较靠谱的也大致是这种：通过添加/移除 class 的方式，利用 css3 做动效。 滚动条复位 当页面回退时，将滚动条恢复到页面最顶部，可以让单页路由看起来更加正常。...由于 React Router4.0 中，路由是一种组件，我们可以利用 componentDidUpdate 简单完成滚动条复位的功能： <ScrollToTop

    2.7K10

    打造聊天框丝滑滚动体验：AI 聊天框的翻转之道

    滚动条调整与滚动行为反转最核心的问题已经解决了，但总觉得哪里看起来怪怪的。滚动条怎么跑到左边，并且滚动行为和鼠标滚轮的方向反了，滚轮向上滚，聊天框却向下滚。...然后在通过监听滚动事件，改变滚动方向就可以恢复鼠标滚轮的滚动行为。...element.addEventListener('wheel', event => { event.preventDefault(); // 阻止默认滚动行为 const { deltaY...总结最后总结一下，我们通过两行 CSS 代码 + 反转滚动行为，利用浏览器的默认行为完美的实现了 AI 聊天框中的滚动体验。...180deg);direction: rtl;element.addEventListener('wheel', event => { event.preventDefault(); // 阻止默认滚动行为

    1.8K21

    2021前端react高频面试题汇总

    React-Router的实现原理是什么？...4. react-router 里的 Link 标签和 a 标签的区别 从最终渲染的 DOM 来看，这两者都是链接，都是 标签，区别是∶ 是react-router 里实现路由跳转的链接，一般配合... 使用，react-router接管了其默认的链接跳转行为，区别于传统的页面跳转， 的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。...做了3件事情: 有onclick那就执行onclick click的时候阻止a标签默认事件 根据跳转href(即是to)，用history (web前端路由两种方式之一，history &...props 的行为只有在构造函数中是不同的，在构造函数之外也是一样的。 10：如何 React.createElement ？

    5.4K00

    2022前端社招React面试题 附答案

    React-Router的实现原理是什么？...4. react-router 里的 Link 标签和 a 标签的区别 从最终渲染的 DOM 来看，这两者都是链接，都是 标签，区别是∶ 是react-router 里实现路由跳转的链接，一般配合... 使用，react-router接管了其默认的链接跳转行为，区别于传统的页面跳转， 的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。...做了3件事情: 有onclick那就执行onclick click的时候阻止a标签默认事件 根据跳转href(即是to)，用history (web前端路由两种方式之一，history &...props 的行为只有在构造函数中是不同的，在构造函数之外也是一样的。 10：如何 React.createElement ？

    4.8K30

    从项目中由浅入深的学习react (2)

    4.x组成 react-router(核心路由和函数) , react-router-dom(API) , react-router-native( React Native 应用使用的API) react-router...4.x的API router(只能有一个) , route(匹配路由渲染UI) , history, link(跳转) , navlink(特定的link,会带样式) , switch(匹配第一个路由...) , redirect(重定向) , withRouter(组件,可传入history,location,match 三个对象) react-router 3.x组成 就是react-router react-router...(跳转) , 路由钩子(onEnter进入,onLeave离开)4.x已经去掉 history react-router有三种模式:1.browserHistory(需要后台支持); 2.hashHistory...:基于react和ant-pc的中后台解决方案 2.4适配方案 左侧固定宽度，右侧自适应 右侧导航分别配置滚动条.控制整个page 2.5技能点分析 技能点 对应api 路由 基于umi,里面有push

    1.4K40

    《CSS世界》第六章 流的破坏与保护总结

    3.破坏文档流 4.没有任何margin合并 float的作用机制 float属性使父元素高度塌陷，为了实现文字环绕效果。...{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } overflow与锚点定位 锚点定位行为的触发条件...URL地址中的锚链与锚点元素对应（a标签以及name属性）并有交互行为 可focus的锚点元素处于focus状态 锚点定位的本质通过改变容器滚动高度或者宽度实现的。...锚点定位发生在普通容器元素上，定位行为是由内而外的。 设置了overflow: hidden;的元素也是可以滚动的，只是滚动条不见了而已。...无依赖absolute定位的相对特性 absolute是非常独立的CSS属性值，其样式和行为表现不依赖其他任何CSS属性就可以完成。

    79330

    如何防止Vue页面局部元素滚动时，页面整体滚动？

    原因分析 e.stopPropagation() 只阻止事件在 JavaScript 中的冒泡传播，但它不会阻止浏览器对滚轮事件的默认处理行为。...而浏览器的默认行为是，当一个滚动事件发生且子元素滚动到边界时（比如已经滚动到底部或顶部），事件会继续传递给父容器，最终传递到 body，导致页面的整体滚动。...解决方法 为了防止整个页面滚动（即 body 的滚动），你需要使用 e.preventDefault() 来阻止浏览器的默认行为。...overflow-y: auto; } 扩展知识 preventDefault() 的其他作用 e.preventDefault() 除了可以阻止默认的浏览器滚动事件外，还可以用来阻止某些元素的默认行为...而e.preventDefault() 仅仅阻止默认行为，而不阻止事件传播。 总结 浏览器的滚动事件需要用preventDefault() 来阻止，这个事件写在某个页面元素上不会影响该元素的正常滚动。

    70400

    📚一站式解决：H5开发全攻略，看这篇让你省时又省力

    */ } ⭐️⭐️禁止滚动传播 使用overscroll-behavior: contain属性可以阻止滚动传播的问题。...兼容原理，1.判断版本类型 2.更改滚动的可视区域 解决方案 通过监听页面高度变化，强制恢复成弹出前的高度。...组件库解决方式 思想思路： 针对触摸滑动事件 touchmove，通过监听滑动方向和滚动元素的状态，决定是否阻止默认的滑动行为，从而防止滚动穿透。...在需要锁定滚动的情况下，给 document 添加 touchstart 和 touchmove 事件的监听器，通过捕获触摸滑动事件，并根据情况阻止默认行为，从而避免滚动穿透。...在解锁滚动时，从 document 移除对触摸事件的监听器，恢复默认的滑动行为。

    90621

    初识HTML之基础篇

    二、前端开发的核心语言 HTML 超文本标记语言 （负责页面结构） CSS 层叠样式表 （负责页面样式） JS 脚本语言 （负责页面行为） ---- HTML的基本结构 <!...属性 ■ _self (在原来页面打开) ■ _blank (新窗口打开) ■ _top (打开是忽略所有的框架) ■ _parent (在父窗口中打开) 创建锚点和锚链接...>`` marquee 标签 可以创建一个滚动效果 4" onmousenver=this.stop( ) onmouseout=this.start...( )> direction 表示滚动方向，取向有（left，right，up，down，默认left） loop 表示滚动循环的次数，默认为无线循环 onmouseover=this.stop...( ) onmouseover=this.start( ) scrollamout="1"（滚动速度） ---- img标签的用法 img图片标签与路径 常用的图片格式 jpg png gif gif

    1.8K40

    【No Problem】如何解决 Mac 左右滚动误触返回事件？

    这个边界触发就是滚动到“超过”滚动区域的水平边界时才会触发，我自己称这个为浏览器的滚动溢出行为（我觉得这样容易理解），也就是其实正常的滚动不会触发 那我们是不是可以在这个边界上做一些特殊的处理呢？...这个 CSS 属性用来控制当滚动到区域的水平边界时的浏览器行为。...none 表示相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。...contain 默认的滚动溢出行为将被内部的元素观察到，(例如: “bounce” 效果或者刷新)，但是相邻的区域不会产生连续滚动效果，例如：在下面的元素不会被滚动。...小结 Mac 中左右滚动导致返回的原因是滚动“超过”滚动区域的水平边界，可以使用 JavaScript 在边界条件中阻止事件，也可以通过 CSS 的 overscroll-behavior-x 控制滚动的行为

    2.3K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券