ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

面试题(三)

面试题(三) 面试题三移动端 外接设备开发 签字、拍视频、验证人脸等的实现React 文档React相关面试题1、核心原理与机制2、Fiber 架构解决了什么问题3、key 的作用是什么为什么不建议用 index 作为 key作用帮助 Diff 算法识别节点身份决定复用、移动还是销毁。 index 的问题当列表发生插入/删除/排序时index对应的内容发生变化导致 React 错误复用旧组件状态如输入框内容错位或触发不必要的重新渲染。应使用稳定唯一的业务 ID。4、Hooks 深度考察Hooks 为什么不能放在条件语句/循环中底层原理React 通过链表顺序存储 Hook 状态。每次渲染按固定顺序读取链表节点若调用顺序变化会导致状态错乱5、useMemo 和 useCallback 什么时候该用/不该用6、useEffect 和 useLayoutEffect 的区别7、状态管理方案选型场景推荐方案理由局部 UI 状态useState/useReducer简单直接无额外依赖跨组件共享轻量Context useContext内置支持避免 prop drilling服务端状态TanStack Query / SWR自动缓存、重试、后台刷新分离服务端/客户端状态复杂全局状态Zustand / Jotai / Redux Toolkit按需选择Zustand 极简Jotai 原子化RTK 适合大型团队表单状态React Hook Form / Formik非受控模式减少重渲染内置校验8、React 特性*· JSX语法· 单向数据绑定· 虚拟DOM· 声明式编程· Component9、state 和props 有什么区别相同点: ·两者都是JavaScript对象 两者都是用于保存信息 props 和state都能触发渲染更新区别: props是外部传递给组件的而 state是在组件内被组件自己管理的一般在constructor中初始化props在组件内部是不可修改的但state在组件内部可以进行修改 state是多变的、可以修改/10、说说对React中类组件和函数组件的理解?有什么区别?11、说对受控组件和非受控组件的理解?应用场景?12、react中引入css的方式有哪几种?区别?1、在组件内直接使用2、 组件中引入.css文件3、组件中引入.module.css文件4、 CSS in JS13、React生命周期有哪些不同阶段?每个阶段对应的方法是?14、组件通信的方式15、对高阶组件的理解?应用场景?16、在react中组件间过渡动画如何实现?17、在React项目是如何捕获错误的?18、对React refs的理解?应用场景?19、React中的setState执行机制20、Reactrender方法的原理?在什么时候会被触发?21、React diff的原理是什么22、对ReactHooks的理解?解决了什么问题?23、React.memo 是什么24、在React项目中是如何使用Redux的?项目结构是如何划分的?25、路由的理解26、Redux中间件的理解?常用的中间件有哪些?实现原理?27、对immutable的理解?如何应用在react项目中性能优化实战1、代码分割与懒加载的最佳实践路由级React.lazy Suspense 按页面拆分。组件级重型组件图表、编辑器动态导入。预加载 或鼠标悬停时提前加载下一路由。2、大列表渲染优化虚拟滚动react-virtuoso / tanstack-virtual仅渲染可视区域。时间切片startTransition 将大数据渲染标记为低优先级保持交互响应。Web Worker将数据处理移出主线程。3、如何定位 React 性能瓶颈React DevTools Profiler查看组件渲染耗时、提交阶段详情。Chrome Performance 面板分析主线程占用、Long Tasks。why-did-you-render 库自动检测不必要的重渲染。关注 React 最新动向Server Components、Compiler自动 memo、Actions 等新特性体现技术敏感度。————————————————————————————————————————————————————————————vue中自定义组件双向数据绑定的实现外部data的字段值赋值给自定义组件的属性自定义组件通过本身或者内部触发事件监听自定义组件事件更改data的字段值可参考https://www.jianshu.com/p/ed9f522742b5vue中data为生命必须是一个函数且返回新的对象在 Vue 组件中 data 必须是一个函数以保证组件的可复用性和数据独立性避免不同组件实例间因为共享同一数据源而导致的状态混乱。XSS攻击及处理XSS攻击是Web攻击中最常见的攻击方法之一它是通过对网页注入可执行代码且成功地被浏览器 执行达到攻击的目的形成了一次有效XSS攻击一旦攻击成功它可以获取用户的联系人列 表然后向联系人发送虚假诈骗信息可以删除用户的日志等等有时候还和其他攻击方式同时实 施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼它带来的危害是巨 大的是web安全的头号大敌。处理a.过滤用户输入的 检查用户输入的内容中是否有非法内容。b. 在表单提交或者url参数传递前对需要的参数进行过滤可参考https://blog.csdn.net/qq_21956483/article/details/54377947直播间功能的实现电商优惠券的发放等keep-alive组件的作用及如何发送请求vue中的 .sync和v-model 的区别 及redictive封装组件中方法的调用原生js如和发送请求云服务器如何管理静态资源(如图片等)管理云服务器上的静态资源如图片、视频、CSS、JavaScript文件等通常涉及以下几个方面 存储位置 单独的文件系统对于小规模应用可以直接将静态资源存放在服务器的文件系统中比如 /var/www/html/static/ 目录下。 对象存储服务对于大型应用或需要高可用性的场景推荐使用云服务商提供的对象存储服务如阿里云OSS、AWS S3、腾讯云COS等。这样可以享受自动扩展、高可用性和低成本的优势。 访问控制 确保静态资源目录的权限设置正确避免安全风险。例如只给予必要的读权限。 对于对象存储可以设置访问策略比如通过ACLAccess Control List控制谁可以访问这些资源。 URL映射 如果静态资源存放在对象存储中需要配置CDN内容分发网络或域名解析将特定URL路径映射到对象存储的访问地址以提高访问速度和用户体验。 缓存策略 设置HTTP缓存头如Cache-Control和ETag以利用浏览器缓存减少服务器负载和提升加载速度。 对象存储服务通常也支持设置生命周期策略自动管理资源的缓存和过期。 监控与自动化 使用云服务商提供的监控工具跟踪静态资源的访问情况和带宽使用。 配置自动化部署流程如使用GitOps或CI/CD管道当静态资源更新时自动部署到生产环境。 备份与恢复 定期备份静态资源特别是对于重要或不可再生的数据。 对象存储服务一般提供数据冗余但仍建议根据业务需要制定额外的备份策略。 性能优化 使用CDN加速全球访问速度减少延迟。 图片懒加载、压缩图片和视频文件大小等前端优化手段进一步提升用户体验。 通过上述管理措施可以有效地在云服务器上管理和优化静态资源的存储与分发确保高性能和高可用性。图片瀑布流加载时如何实现大图片变为小图片增加性能参考https://blog.csdn.net/weixin_34413357/article/details/91444114响应式开发的理解jquery中的链式调用的原理简要描述CSS的盒模型概念css盒子模型包含了元素内容content、内边距padding、边框border、外边距margin几个要素。分为标准盒模型和 IE盒模型标准模型content ,box-sizing:content-box;//设置标准盒子模型IE模型content padding border ,box-sizingborder-box//IE模型行内元素和块级元素的区别1、行内元素a.高行高及顶和底边距不可改变b.只能容纳文本或其他内联元素c.不会自动换行2、块级元素a.高度行高以及顶和底边距都可以控制b.能容纳其他块元素或者内联元素c.独自占据一行d.多个块状默认排列从上到下vue和react的区别a.监听数据变化的实现原理不同Vue通过 getter/setter以及一些函数的劫持能精确知道数据变化。React默认是通过比较引用的方式diff进行的如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢这是因为Vue和React设计理念上的区别Vue使用的是可变数据而React更强调数据的不可变两者没有好坏之分。b.数据流的不同Vue1.0中可以实现两种双向绑定父子组件之间props可以双向绑定组件与DOM之间可以通过v-model双向绑定。Vue2.x中去掉了第一种也就是父子组件之间不能双向绑定了但是提供了一个语法糖自动帮你通过事件的方式修改并且Vue2.x已经不鼓励组件对自己的 props进行任何修改了。React一直不支持双向绑定提倡的是单向数据流称之为onChange/setState()模式。不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架因此很多时候我们感受不到这一点的区别了。c. 组件通信的区别Vue中有三种方式可以实现组件通信父组件通过props向子组件传递数据或者回调虽然可以传递回调但是我们一般只传数据子组件通过事件向父组件发送消息通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据可以跨越多个层级。React中也有对应的三种方式父组件通过props可以向子组件传递数据或者回调可以通过 context 进行跨层级的通信这其实和 provide/inject 起到的作用差不多。React 本身并不支持自定义事件而Vue中子组件向父组件传递消息有两种方式事件和回调函数但Vue更倾向于使用事件。在React中我们都是使用回调函数的这可能是他们二者最大的区别。d.模板渲染方式的不同在表层上模板的语法不同React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染但其实这只是表面现象毕竟React并不必须依赖JSX。在深层上模板的原理不同这才是他们的本质区别React是在组件JS代码中通过原生JS实现模板中的常见语法比如插值条件循环等都是通过JS语法实现的更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中通过指令来实现的比如条件语句就需要 v-if 来实现对这一点这样的做法显得有些独特会把HTML弄得很乱。e.Vuex和Redux的区别从表面上来说store注入和使用方式有一些区别。在Vuex中s t o r e 被直接注入到了组件实例中因此可以比较灵活的使用使用 d i s p a t c h 、 c o m m i t 提交更新通过 m a p S t a t e 或者直接通过 t h i s . store被直接注入到了组件实例中因此可以比较灵活的使用使用dispatch、commit提交更新通过mapState或者直接通过this.store被直接注入到了组件实例中因此可以比较灵活的使用使用dispatch、commit提交更新通过mapState或者直接通过this.store来读取数据。在Redux中我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。另外Vuex更加灵活一些组件中既可以dispatch action也可以commit updates而Redux中只能进行dispatch不能直接调用reducer进行修改。vue2.0中的router和router 的区别1.router是VueRouter的一个对象通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象这个对象中是一个全局的对象他包含了所有的路由包含了许多关键的对象和属性。2.route是一个跳转的路由对象每一个路由都会有一个route对象是一个局部的对象可以获取对应的name,path,params,query等js操作数组的方法push()方法在数组的尾部添加一个或者多个元素并返回数组的新长度。注意的是改变的是原数组的值返回的是新数组的长度,pop()方法删除数组的最后一个元素并返回它的删除值。也是改变原数组返回的是删除的值,every() 对数组每一项运行给定函数该函数每一项返回true则返回true ,some() 对数组每一项运行给定函数该函数任一项返回true则返回true,filter() 对数组每一项运行给定函数,返回该函数会返回true的项组成的数组,map() 对数组每一项运行给定函数,返回每次函数调用结果组成的数组,forEach() 对数组每一项运行给定函数,没有返回值等什么是闭包闭包的优缺点及应用场景闭包就是能够读取其他函数内部变量的函数。由于 javascript 的特性外层的函数无法访问内部函数的变量而内部函数可以访问外部函数的变量即作用域链优点隐藏变量以及防止变量被篡改和作用域的污染从而实现封装缺点函数执行完后函数内的局部变量没有释放占用内存时间变长容易造成内存泄漏解决方法让内部函数变成垃圾对象赋值为null及时释放让浏览器回收闭包https://www.html.cn/qa/other/23216.html21.vue router里面的参数有哪些params和queryes6的浅拷贝浅拷贝浅拷贝的时候,他创建一个新的对象,这个对象中存放着原对象精准的值,如果对象是基本数据类型,拷贝的就是基本类型的值,如果对象是引用数据类型,拷贝的则是这个对象所指向的一个指针,如果其中一个对象的引用数据类型改变了值,那么会影响另外一个的值,简单来说就是,只拷贝第一层中的值,但是对象中的子对象不会,两者就会有相同的引用数组中可以实现浅拷贝的方法扩展运算符,concat,slice对象中可以实现浅拷贝的方法Object.assign()可参考https://blog.csdn.net/qq_40198420/article/details/103612712vue 子组件和父组件生命周期的执行顺序参考https://blog.csdn.net/weixin_30616969/article/details/94973817mixin的生命周期和vue的生命周期执行顺序参考父子组件生命周期执行顺序创建与挂载父beforeCreate父created父beforeMount子beforeCreate子created子beforeMount子mounted父mounted更新父beforeUpdate子beforeUpdate子updated父updated销毁父beforeDestroy子beforeDestroy子destroyed父destroyed父子组件及mixin的生命周期执行顺序mixin的生命周期钩子在组件的生命周期钩子之前执行在父组件中引入了mixin生命周期顺序如下mixin的beforeCreate父beforeCreatemixin的created父createdmixin的beforeMount父beforeMount子beforeCreate子created子beforeMount子mountedmixin的mounted父mountedhttps://www.jianshu.com/p/f0b7950b3ab0https://www.cnblogs.com/aidixie/p/12620317.html父组件怎么监听子组件的生命周期参考https://www.cnblogs.com/mengfangui/p/12546866.htmlvue组件间通信的多种方式props/$emit ;e m i t / emit/emit/on ;Vuex与localStorage ;provide/inject ;$parent / $children与 ref ;a t t r s / attrs/attrs/listeners ;参考https://segmentfault.com/a/1190000019208626简述js的 Event Loop事件循环机制主线程运行的时候会产生堆和栈。栈中的代码会调用各种外部 API。他们在任务队列中加入各种事件。只要栈中的代码执行完毕主线程就会去读取“任务列队”依次执行哪些事件所对应的回调函数。主线程从“任务队列”中读取事件这个过程是循环不断的。所以叫事件循环机制。https://blog.csdn.net/qq_33572444/article/details/7910693527.有一个数组里面包对象如何判断类似的2个数组相等扩展运算符…js事件循环机制(EventLoop) , 及宏任务 (macro task) 和 微任务 (micro task)ES6种的set(),和map()可参考https://blog.csdn.net/xieanna123/article/details/10554575https://www.runoob.com/w3cnote/front-end-developer-questions-and-answers.html
返回列表