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

美团前端react面试题汇总

组件页面通过服务器生成html字符串,再发送到浏览器,最后静态标记"混合"为客户端上完全交互应用程序。...页面没使用服务渲染,当请求页面时,返回body里为空,之后执行jshtml结构注入body里,结合css显示出来;SSR优势:对SEO友好所有的模版、图片等资源都存在服务器端一个html返回所有数据减少...客户端在不同网络环境进行数据请求,且外网http请求开销大,导致时间差客户端数据请求服务端数据请求 2)html渲染 服务端渲染是先向后端服务器请求数据,然后生成完整首屏 html返回给浏览器;而客户端渲染是等...这时就会有全局数据持久存储需求。首先想到就是localStorage,localStorage是没有时间限制数据存储,可以通过它来实现数据持久存储。...持久本地数据存储简单应用。

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

Web 应用开发进化论

如果 Web 服务器能够请求与网站匹配,它会将网站 HTML 文件返回给你浏览器。 为了网站传输到浏览器, 客户端和 Web 服务器之间请求和响应通信工作由 HTTP 协议来承担。...为了 React 应用(库)打包一个多个(带有代码拆分)JavaScript 文件中,另一种称为 tree shaking 技术开始发挥作用,它会帮助我们消除掉未使用过代码,避免这些代码被打包...现在,客户端要么从内存中本地状态中删除博客文章,要么再次从服务器获取所有博客文章,并用更新博客文章列表替换内存中博客文章。 在执行客户端路由时,可以通过状态管理最小数据(例如文章)请求。...这意味着理想情况下,从一个页面导航另一个页面然后返回初始页面的用户不应该触发对初始页面所需数据第二次请求。相反,它应该已经通过状态管理缓存在客户端上了。...当用户从一个页面导航另一个页面时,只有一小部分服务器端渲染 React 被发送到浏览器

4.2K10

后端分离后前端时代,使用前端技术能做哪些事?

前端负责切图和编写静态页面模板,后端数据渲染前端提供页面模板中,最后页面渲染浏览器展示。...前后端分离后,需要考虑哪些事情 分离后前端,不再是一个简单HTML文件,已经是一个独立应用系统。除了要考虑页面数据渲染展示,还要用工程思想来考虑前端架构,前后端交互和数据安全等事情。...REST是“呈现状态转移(REpresentational State Transfer)”缩写,一种API架构风格,在客户端和服务端之间通过呈现状态转移来驱动应用状态演进。...如果你使用了Angular、ReactVue框架,或者你使用浏览器暂时还不兼容ES6语法,还需要在应用打包前用babel语法编译成浏览器可识别的ES5语法。...像Angular、ReactVue就是为了SPA而设计,结合前端路由库(react-router、vue-router)和状态热存储(redux、vuex)等,可以开发出一个媲美Native APP

2.2K30

前端react面试题总结

如果需要基于另一个状态属性)更新组件状态,请向setState()传递一个函数,该函数 state 和 props 作为其两个参数:this.setState((state, props) =>...这时就会有全局数据持久存储需求。首先想到就是localStorage,localStorage是没有时间限制数据存储,可以通过它来实现数据持久存储。...持久本地数据存储简单应用。...类组件可以使用其他特性,如状态 state 和生命周期钩子。当组件只是接收 props 渲染页面时,就是无状态组件,就属于函数组件,也被称为哑组件展示组件。...在组件生命周期中有四个不同阶段:Initialization:在这个阶段,组件准备设置初始状态和默认属性。Mounting:react 组件已经准备好挂载到浏览器 DOM 中。

2.5K30

【JS】1693- 重学 JavaScript API - Web Storage API

这些方法允许开发者在浏览器中保存和获取数据。 localStorage 用于「持久性存储数据」,数据会一直保留在用户浏览器中,即使用户关闭了浏览器重新启动设备。...1.2 作用和使用场景 Web Storage API 具有许多使用场景,比如: 保存用户首选项和设置 缓存数据以提高应用程序性能 在不同页面之间共享数据 实现离线应用程序 2....localStorage.setItem("cachedData", JSON.stringify(data)); } 3.3 在不同页面之间共享数据 Web Storage API 允许在同一浏览器不同页面之间共享数据...这对于需要在多个页面中传递信息共享状态应用程序非常有用。 在页面 A 中设置共享数据: localStorage.setItem("sharedData", "Hello, World!")...// 用户登录成功后,登录状态存储本地存储中 localStorage.setItem("isLoggedIn", "true"); // 检查本地存储中是否存在登录状态 const isLoggedIn

22140

IdentityServer Topics(7)- 注销

IdentityServer支持服务器端客户端(MVC Client)前端通信规范,服务器端客户端(MVC Client)后端通信规范,以及基于浏览器JavaScript客户端(例如SPA,React...后端通信 通过后端通信来注销用户,IdentityServer中SignOutIFrameUrl端点将自动触发服务器服务器调用,签名注销请求传递给客户端。...在会话结束端点进行处理可能需要通过重定向注销页面来维护一些临时状态(例如,客户端注销,注销重定向uri)。 该状态可能对注销页面有用,并且状态标识符通过logoutId参数传递注销页面。...默认情况下,此状态作为通过logoutId值传递受保护数据结构进行管理。...如果您希望在会话终端和注销页面之间使用其他持久性,则可以实现IMessageStore 并在DI中注册实现。

2K20

前端ReactJS技术介绍

,局部更新数据,避免整页面刷新 后端使用模板技术,帮助输出页面 前端使用模板技术,帮助构造html页面片断 前端形成了一些CSS框架,如bootstrap 前端形成了一些JS工具方法常用组件,如jQuery...,包括页面路由、数据请求、组件数据绑定、业务逻辑串联等 胖客户端架构优点 分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,各司其职,不会把前后端逻辑混杂在一起 前端页面组件,提高代码重复利用率...基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React当前整个DOM树和上一次DOM树进行对比,得到DOM结构区别,然后仅仅需要变化部分进行实际浏览器...这样,在保证性能同时,开发者将不再需要关注某个数据变化如何更新到一个多个具体DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render。...React可以在浏览器服务端进行渲染,甚至借助于React Native,可在移动设备中渲染。

5.4K40

React组件设计实践总结05 - 状态管理

这种开发方式变化其实得益于 Virtual-DOM, 它使得我们不需要关心浏览器底层 DOM 操作细节,只需关心‘状态(state)’和‘状态 UI 映射关系(f)’....比如实现持久,可恢复,可撤销/重做 … 首先确定是否需要 Redux、Mobx 这些复杂状态管理工具? 在 2019 他们很多功能都可以被 React 本身提供特性取代....比如: 你需要持久应用状态, 这样你可以从本地存储服务器返回数据中恢复应用 需要实现撤销重做这些功能 实现跨页面的用户协作 应用状态很复杂时 数据流比较复杂时 许多不相关组件需要共享和更新状态 外置状态...如果你应用要做‘时间旅行(撤销/重做)’或者应用持久,这个状态需要被恢复,那么应该放到 Redux Store,集中管理数据是 Redux 强项 状态是否需要跨越组件生命周期?...另外这种横向隔离 UI 和状态,也是有好处,比如 UI 相比业务状态变化频度会更大. 个人感觉页面这个级别的分化刚刚好,比如方便分工。

2.1K31

React面试八股文(第一期)

react有什么特点react使用过虚拟DOM,而不是真实DOMreact可以用服务器渲染react遵循单向数据流 或者数据绑定React 数据持久有什么实践吗?...这时就会有全局数据持久存储需求。首先想到就是localStorage,localStorage是没有时间限制数据存储,可以通过它来实现数据持久存储。...持久本地数据存储简单应用。...React 生命周期函数挂载阶段挂载阶段也可以理解为初始阶段,也就是把我们组件插入 DOM 中。...这样简单单向数据流支撑起了 React数据可控性。当项目越来越大时候,管理数据事件回调函数越来越多,也越来越不好管理。管理不断变化 state 非常困难。

3K30

【ASP.NET Core 基础知识】--前端开发--集成前端框架

页面应用(SPA): Angular是构建单页面应用理想选择。通过使用Angular路由系统,可以实现页面之间无缝导航,同时双向数据绑定提供了良好用户体验。...这些方法允许开发者在组件不同生命周期阶段执行特定操作,如初始数据、处理更新等。 状态管理: React组件可以拥有自己状态(state),状态变化会触发组件重新渲染。...以下是React一些主要适用场景: 单页面应用(SPA): React非常适合构建单页面应用,通过React Router等工具可以实现页面之间无缝切换,同时React虚拟DOM技术可以提高页面性能和用户体验...React快速渲染和数据更新机制使其在处理实时数据方面表现出色。 大型企业级应用: React组件状态管理和灵活性使其非常适合构建大型企业级应用。...灾难恢复计划: 制定灾难恢复计划,以应对可能发生服务器故障、数据丢失其他突发情况。 通过遵循上述步骤,您可以成功地前端应用程序部署生产环境中,以提供稳定可靠服务。

5000

从Vue.js窥探前端行业

3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移 在传统MVC下,当前前端和后端发生数据交互后会刷新整个页面,从而导致比较差用户体验。...ViewModel起是一个观察者职位:当数据变化,ViewModel观察变化,并通知视图做相应更新;而用户操作视图,ViewModel也能监听到变化,然后通知数据做改动,从而实现了数据双向绑定...2.MVVM框架应用场景 MVVM框架针对具有复杂交互逻辑前端应用,它提供了基础架构抽象,并且通过Ajax数据持久,保证前端用户体验。...所以MVVM框架好处显而易见:当前端对数据进行操作时候,可以通过Ajax请求对数据持久,而不必刷新整个页面,只需改变dom里需要改变那部分数据内容。特别是在移动端,刷新页面的代价太昂贵。...Angular有56K,React有44K。 Vue.js相对来说学习曲线比较平稳。 Vue.js吸取了两家之长,借鉴了Angular指令和react组件

1.7K80

前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【下篇】

协议 ProtoBuffer是由谷歌研发对象序列和反序列开源工具 它本质就是一段数据序列,转变成二进制形式传输 然后另外服务器端或者客户端接受到之后 反序列,转换成对应数据格式(json...快约20-100倍; 4.序列数据非常简洁、紧凑,与XML相比,其序列之后数据量约为1/31/10。...//dosomething } 从零编写一个react框架 数据持久存储 PWA,渐进式web应用 数据资源储存在缓存中,每次请求前判断是否在Service Worker中,如果没有再请求网络资源...所以要确保安全,目前PWA并不成熟,浏览器兼容性还是不那么好,但是它用起来是真的很舒服 另外一种持久存储方案: localStorage image.png 浏览器API有localStorage.getItem...2.weight 根据权重来分发请求不同机器中,指定轮询几率,weight和访问比率成正比,用于后端服务器性能不均情况。

60020

React Server Components手把手教学

❞ ---- 水合(Hydration) 在计算机科学领域,水合(Hydration)通常指的是「数据状态从一种格式状态转换为另一种格式状态过程」。...一个组件被拆分为多个子组件 然后,这些组件可以拥有自己私有数据,称为状态(state),以及在其他组件之间传递数据方式,称为属性(props)。...不能使用浏览器 API,比如本地存储等(不过在服务器上可以进行 polyfill)。 不能使用依赖于仅限于浏览器 API(例如本地存储)依赖于状态效果自定义钩子任何实用函数。 ---- 7....通过SSR,我们原始HTML从服务器发送到客户端,然后所有客户端JavaScript都被下载。React开始水合过程,HTML转换为可交互React组件。...---- 全权访问后端数据 正如前面所讨论,服务器组件可以利用直接后端访问来使用数据库、内部(微)服务和其他仅限于后端数据源。

60430

IMVC(同构 MVC)前端实践

若两个数学结构之间存在同构映射,那么这两个结构叫做是同构。一般来说,如果忽略掉同构对象属性操作具体定义,单从结构上讲,同构对象是完全等价。...开始有「前后端分离」做法,前端希望服务端只提供 restful 接口和数据持久。 但是在这个阶段,做得不够彻底。...它增加了代码阅读成本,以及各个路由模块之间关系与 UI(React 组件)嵌套耦合在一起,并不灵活。 使用扁平路由,可以使代码解耦,容易阅读,并且更为灵活。...因为,UI 之间复用,可以通过 React 组件直接嵌套来实现。 基于路由嵌套关系来复用 UI,容易遇上一个尴尬场景:恰好只有一个页面不需要共享头部,而头部却不在它控制范畴内。...问题根源:浏览器只在 dom-ready 之前会等待 css 资源加载后再渲染页面 问题描述:当单页跳转到另一个 url,css 资源还没加载完,页面显示成混乱布局 处理办法: css 视为预加载

1.2K60

玩转 React 服务器端渲染

用来组件(Virtual DOM)输出成 HTML 字符串,这是 React 服务器端渲染基础,它移除了服务器端对于浏览器环境依赖,所以让服务器端渲染变成了一件有吸引力事情。...服务器端渲染除了要解决对浏览器环境依赖,还要解决两个问题: 前后端可以共享代码 前后端路由可以统一处理 React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说明...就对应一个 UI 快照,服务器端渲染就简化成了在服务器端初始 Store, Store 传入应用根组件,针对根组件调用renderToString就将整个应用输出成包含了初始数据 HTML。...另外注意renderFullPage生成页面 HTML 在 React 组件 mount 部分( ),前后端 HTML 结构应该是一致。...然后要把store状态树写入一个全局变量(__INITIAL_STATE__),这样客户端初始 render 时候能够校验服务器生成 HTML 结构,并且同步初始状态,然后整个页面被客户端接管

2.3K80

干货 | IMVC(同构 MVC)前端实践

若两个数学结构之间存在同构映射,那么这两个结构叫做是同构。一般来说,如果忽略掉同构对象属性操作具体定义,单从结构上讲,同构对象是完全等价。...开始有「前后端分离」做法,前端希望服务端只提供 restful 接口和数据持久。 但是在这个阶段,做得不够彻底。...它增加了代码阅读成本,以及各个路由模块之间关系与 UI(React 组件)嵌套耦合在一起,并不灵活。 使用扁平路由,可以使代码解耦,容易阅读,并且更为灵活。...因为,UI 之间复用,可以通过 React 组件直接嵌套来实现。 基于路由嵌套关系来复用 UI,容易遇上一个尴尬场景:恰好只有一个页面不需要共享头部,而头部却不在它控制范畴内。...问题根源:浏览器只在 dom-ready 之前会等待 css 资源加载后再渲染页面 问题描述:当单页跳转到另一个 url,css 资源还没加载完,页面显示成混乱布局 处理办法: css 视为预加载

1.6K50

干货 | 如何一步步打造基于React移动端SPA框架

React编码规范 MVC结构定义,Controller,Actions,Reducers,React组件之间职能划分 ES6使用指南及限制。...StatesManager中Store主要存储页面状态数据,就是我们挂载存储器。分为页面存储器和应用存储器两种,其中页面存储器存储当前页面状态,而应用存储器全局状态和全局数据。...我们按下面三种规则来定义插件: 需要插入应用页面生命周期某一个环节功能 该功能可以独立封装,不依赖外部功能 多系统页面共用。...没错就是渲染了两次,这就是我们现在框架需要改进方向,我们将来方案应该是利用后端提供数据绑定页面React组件,而非重新渲染。...这其实是在项目前期,我们心里对Redux还是有所抵触,思维要从原来操作DOM操作React这种状态操作,同时对从React直接操作状态通过action去更改组件状态,的确需要时间消化。

1.7K100

2020最新前端面试题_2020年前端面试题

60、Vuex 页面刷新数据丢失怎么解决? 需要做 vuex 数据持久,一般使用本地储存方案来保存数据, 可以自己设计存储方案,也可以使用第三方插件。...因此sessionStorage不是一种持久本地存储,仅仅是会话级别的存储。 而localStorage用于持久本地存储,除非主动删除数据,否则数据是永远不会过期。...localStorage用于持久本地存储,除非主动删除数据,否则数据永远不会过期。...它们总是在整个应用中从父组件传递子组件。子组件永远不能将 prop 送回父组件。 这有助于维护单向数据流,通常用于呈现动态生成数据 9、React状态是什么?...因此,Redux 非常简单且是可预测。 我们可以中间件传递 store 来处理数据,并记录改变存储状态各种操作。

6.6K10
领券