首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

加载 React 长页面 - 动态渲染组件

背景 长页面在前端开发中是非常常见的。例如下图中的电商首页,楼层数据来自运营人员在后台的配置,楼层数量是固定的,同时每个楼层可能会依赖更多翻页数据。...在这种情况下,如果一次性将页面全部渲染,可想而知,我们的页面直出效率(fmp, fid)会受到影响。 为了更好的用户体验,我们需要考虑在用户滚动到下一屏,渲染下一屏的组件。 ?...设计思路 假设页面预期渲染 n 个组件,每个组件均会触发请求其他接口。设计这样一个长页面,我们主要会面临以下两个问题: 渲染下一屏组件的时机应该如何判断?...Loading 组件是否在视图内 如图 1 所示,当 loading 组件的位置滚动到视图中,并且如果此时还有未渲染的组件,这时便是渲染下一屏的时机。...如果传 areEqual 则对 props 进行浅比较。若传入,则需要返回具体的比较结果 true, false 。

3.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

图片懒加载组件封装,加载loading效果,加载失败暂时默认图片

ing才执行滚动监听判断是否可加载 if (this.loadImg || this.isLoadError) return const...属性名 类型 必填 默认值 说明 image-src String 是 图片资源地址 scroll-top Number 是 传入滚动值监听并触发组件 mode String 否 同image组件的...mode属性 loading-mode String 否 looming-gray loading加载中的占位图效果 open-transition Boolean 否 true 是否开启加载成功后的渐现过渡效果...view-height Number 否 真机可视窗高度 可视区域高度 view-height属性说明 在大量图片在同一个页面使用该组件可传入可视区域高度,避免重复获取窗口高度 你也可以在页面(父组件....loadfail-img 加载失败占位图

1.3K10

网站建设(二)通用--页面加载的loading效果

撇开如何优化加载资源不谈,在页面加载,不论是有过多的加载资源,还是有一些提前处理逻辑。这一过程可能不希望用户看到,显示一个友好的loading会比较好一点。...当页面处理完毕后,再将loading移除。 要想实现这个效果,首先要明白一个网页从加载(loading效果出现),到完全加载完成(loading效果消失)的整个过程。也就是何时出现,何时消失。...页面加载流程 1. 下载 index.html 2. 解析 head 标签中的 link 与 script 标签, 如果是带有 src 属性, 阻塞其他逻辑执行, 继续去下载对应的资源并执行....也就是说需要渲染完页面元素以后,显示loading才是正确的选择。所以引用外部的script,抑或所有的ajax,尽量写到body最后,在加载这些资源前,设置出现loading。...2)监听 iframe 的onload事件,当 iframe 加载完成,移除 loading 效果。

2.1K20

vue 加载页面触发时间_Vue 刷新页面时会触发事件吗「建议收藏」

使用localstorage做本地存储,然后我想在刷新页面或者离开页面的调用localstorage方法 1、页面刷新使用localstorage,也就是当vue被实例化之后有如下几个可以供你使用.../ 创建前状态 } created () { // 创建完毕状态 } beforeMount(){ // 挂载前状态 } mounted(){ // 挂载结束状态 } } 这几个都是可以在页面刷新的时候操作本地存储...注: 其实本地存储也可以写在vue实例当中,本质上与vue无关,你只是在当页面刷新的时候为了执行一段js而已 main.js /* 项目启动 */ import Vue from ‘vue’ import...$mount(‘#app’) 2、页面关闭与vue的生命周期无关,也不存在销毁一说,因此关闭页面没有方法让你使用操作localStorage,这一点跟楼上几位说的不一样。

1.6K20

React服务端渲染-next.js

默认情况下由服务器呈现 自动代码拆分可加快页面加载速度 客户端路由(基于页面) 基于 Webpack 的开发环境,支持热模块替换(HMR) 官方文档 中文官网-带有测试题 初始化项目 方式1:手动撸一个...特点3:_app.js和_document.js _app.js可以认为是页面的父组件,可以做一些统一布局,错误处理之类的事情,比如: 页面布局 当路由变化时保持页面状态 使用componentDidCatch...浅层路由允许改变 URL但是执行getInitialProps 生命周期。可以加载相同页面的 URL,得到更新后的路由属性pathname和query,并不失去 state 状态。...counter=10', { shallow: true }) 那么这将会出现新页面,即使我们加了浅层路由,但是它还是会卸载当前页,会加载新的页面并触发新页面的getInitialProps。...这时,你只能在特定页面(如果只有某个页面的某个接口需要鉴权),或者在_app.js这个全局组件上添加登录态判断:componentDidMount中调用登录态接口,并根据当前用户状态做是否重定向到登录页的操作

4K21

美团前端一面必会react面试题4

数据放在redux里面在使用 React Router,如何获取当前页面的路由或浏览器中地址栏中的地址?...,作为props传给真正的Component componentDidMount,添加事件this.store.subscribe(this.handleChange),实现页面交互shouldComponentUpdate...尽管建议在app中使用context,但是独有组件而言,由于影响范围小于app,如果可以做到高内聚,破坏组件树之间的依赖关系,可以考虑使用context对于组件之间的数据通信或者状态管理,有效使用props...componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重新渲染。...,页面就无法加载出来。

3K30

React组件(推荐,差代码) 原

Helloworld就是一个组件 使用的时候就在ReactDOM.render里面加载 ? 显示出来 组件的优越处:可重用性 ? 增加组件的父节点和其他兄弟节点 ? 组件输入参数: ?...getInitialState——组件加载之前会被调用-初始化组件 ?...componentDidMount——组件被浏览器加载之后,但是render函数还没有被调用之前 这里是调用定时器的最佳时期 ? setState——用来修改组件本身的state对象 ? ? ? ?...调用机制: getInitialState初始化加载   —>   componentDidMount被调用   —>   定时器开启  —>  触发上图render函数  —>  如果render里面引用了他的子组件...三、组件的生命周期 ? 几个重要的生命周期函数 ? ? ? ? 对应this.props ? 对应this.state ? 挂在到#container下 ? 说明组件被框架加载页面了 ?

2.4K20
领券