企业官网建设流程全解析

面试题（三）

移动端 外接设备开发， 签字、拍视频、验证人脸等的实现
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、状态管理方案选型

8、React 特性：*
· JSX语法
· 单向数据绑定
· 虚拟DOM
· 声明式编程
· Component

9、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 JS

13、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 等新特性，体现技术敏感度。

————————————————————————————————————————————————————————————

1. vue中自定义组件双向数据绑定的实现
   外部data的字段值赋值给自定义组件的属性，自定义组件通过本身或者内部触发事件，监听自定义组件事件更改data的字段值
   可参考：https://www.jianshu.com/p/ed9f522742b5

2. vue中data为生命必须是一个函数，且返回新的对象？

在 Vue 组件中 data 必须是一个函数以保证组件的可复用性和数据独立性，避免不同组件实例间因为共享同一数据源而导致的状态混乱。

3. XSS攻击及处理
   XSS攻击是Web攻击中最常见的攻击方法之一，它是通过对网页注入可执行代码且成功地被浏览器 执行，达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可以获取用户的联系人列 表，然后向联系人发送虚假诈骗信息，可以删除用户的日志等等，有时候还和其他攻击方式同时实 施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼，它带来的危害是巨 大的，是web安全的头号大敌。

   处理：
   a.过滤用户输入的 检查用户输入的内容中是否有非法内容。
   b. 在表单提交或者url参数传递前，对需要的参数进行过滤

   可参考：https://blog.csdn.net/qq_21956483/article/details/54377947

4. 直播间功能的实现

5. 电商优惠券的发放等

6. keep-alive组件的作用，及如何发送请求

7. vue中的 .sync和v-model 的区别， 及@redictive

8. 封装组件中方法的调用

9. 原生js如和发送请求

10. 云服务器如何管理静态资源(如图片等)

管理云服务器上的静态资源（如图片、视频、CSS、JavaScript文件等）通常涉及以下几个方面： 存储位置： 单独的文件系统：对于小规模应用，可以直接将静态资源存放在服务器的文件系统中，比如 /var/www/html/static/ 目录下。 对象存储服务：对于大型应用或需要高可用性的场景，推荐使用云服务商提供的对象存储服务（如阿里云OSS、AWS S3、腾讯云COS等）。这样可以享受自动扩展、高可用性和低成本的优势。 访问控制： 确保静态资源目录的权限设置正确，避免安全风险。例如，只给予必要的读权限。 对于对象存储，可以设置访问策略，比如通过ACL（Access Control List）控制谁可以访问这些资源。 URL映射： 如果静态资源存放在对象存储中，需要配置CDN（内容分发网络）或域名解析，将特定URL路径映射到对象存储的访问地址，以提高访问速度和用户体验。 缓存策略： 设置HTTP缓存头，如Cache-Control和ETag，以利用浏览器缓存减少服务器负载和提升加载速度。 对象存储服务通常也支持设置生命周期策略，自动管理资源的缓存和过期。 监控与自动化： 使用云服务商提供的监控工具，跟踪静态资源的访问情况和带宽使用。 配置自动化部署流程，如使用GitOps或CI/CD管道，当静态资源更新时自动部署到生产环境。 备份与恢复： 定期备份静态资源，特别是对于重要或不可再生的数据。 对象存储服务一般提供数据冗余，但仍建议根据业务需要制定额外的备份策略。 性能优化： 使用CDN加速全球访问速度，减少延迟。 图片懒加载、压缩图片和视频文件大小等前端优化手段，进一步提升用户体验。 通过上述管理措施，可以有效地在云服务器上管理和优化静态资源的存储与分发，确保高性能和高可用性。

11. 图片瀑布流，加载时，如何实现大图片变为小图片，增加性能
    参考：https://blog.csdn.net/weixin_34413357/article/details/91444114

12. 响应式开发的理解

13. jquery中的链式调用的原理

14. 简要描述CSS的盒模型概念
    css盒子模型包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
    分为标准盒模型和 IE盒模型
    标准模型：content ,
    box-sizing:content-box;//设置标准盒子模型

IE模型：content + padding + border ,
box-sizing：border-box//IE模型

15. 行内元素和块级元素的区别
    1）、行内元素
    a.高，行高及顶和底边距不可改变
    b.只能容纳文本或其他内联元素
    c.不会自动换行

2）、块级元素
a.高度，行高以及顶和底边距都可以控制
b.能容纳其他块元素或者内联元素
c.独自占据一行
d.多个块状，默认排列从上到下

16. 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进行修改。

18. vue2.0中的￥router和￥router 的区别
    1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

19. js操作数组的方法
    push()方法在数组的尾部添加一个或者多个元素，并返回数组的新长度。注意的是，改变的是原数组的值，返回的是新数组的长度,
    pop()方法删除数组的最后一个元素，并返回它的删除值。也是改变原数组，返回的是删除的值,
    every() 对数组每一项运行给定函数，该函数每一项返回true则返回true ,
    some() 对数组每一项运行给定函数，该函数任一项返回true则返回true,
    filter() 对数组每一项运行给定函数,返回该函数会返回true的项组成的数组,
    map() 对数组每一项运行给定函数,返回每次函数调用结果组成的数组,
    forEach() 对数组每一项运行给定函数,没有返回值等

20. 什么是闭包，闭包的优缺点及应用场景
    闭包就是能够读取其他函数内部变量的函数。由于 javascript 的特性，外层的函数无法访问内部函数的变量；而内部函数可以访问外部函数的变量（即作用域链）
    优点：
    隐藏变量以及防止变量被篡改和作用域的污染，从而实现封装
    缺点：
    函数执行完后，函数内的局部变量没有释放，占用内存时间变长，容易造成内存泄漏
    解决方法：
    让内部函数变成垃圾对象，赋值为null，及时释放，让浏览器回收闭包
    https://www.html.cn/qa/other/23216.html

21.vue router里面的参数有哪些？
params和query

21. es6的浅拷贝
    浅拷贝：浅拷贝的时候,他创建一个新的对象,这个对象中存放着原对象精准的值,如果对象是基本数据类型,拷贝的就是基本类型的值,如果对象是引用数据类型,拷贝的则是这个对象所指向的一个指针,如果其中一个对象的引用数据类型改变了值,那么会影响另外一个的值,简单来说就是,只拷贝第一层中的值,但是对象中的子对象不会,两者就会有相同的引用

数组中：可以实现浅拷贝的方法：扩展运算符,concat,slice
对象中：可以实现浅拷贝的方法：Object.assign()
可参考：https://blog.csdn.net/qq_40198420/article/details/103612712

22. vue 子组件和父组件生命周期的执行顺序
    参考：
    https://blog.csdn.net/weixin_30616969/article/details/94973817

23. mixin的生命周期和vue的生命周期执行顺序
    参考：
    父子组件生命周期执行顺序：

创建与挂载：

父beforeCreate>父created>父beforeMount>子beforeCreate>子created>子beforeMount>子mounted>父mounted

更新：

父beforeUpdate>子beforeUpdate>子updated>父updated

销毁

父beforeDestroy>子beforeDestroy>子destroyed>父destroyed

父子组件及mixin的生命周期执行顺序
mixin的生命周期钩子在组件的生命周期钩子之前执行

在父组件中引入了mixin，生命周期顺序如下：

mixin的beforeCreate>父beforeCreate>mixin的created>父created>mixin的beforeMount>父beforeMount>子beforeCreate>子created>子beforeMount>子mounted>mixin的mounted>父mounted

https://www.jianshu.com/p/f0b7950b3ab0

https://www.cnblogs.com/aidixie/p/12620317.html

24. 父组件怎么监听子组件的生命周期
    参考：
    https://www.cnblogs.com/mengfangui/p/12546866.html

25. vue组件间通信的多种方式

• 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

26. 简述js的 Event Loop事件循环机制
    主线程运行的时候，会产生堆和栈。栈中的代码会调用各种外部 API。他们在任务队列中加入各种事件。只要栈中的代码执行完毕，主线程就会去读取“任务列队”，依次执行哪些事件所对应的回调函数。主线程从“任务队列”中读取事件，这个过程是循环不断的。所以叫事件循环机制。
    https://blog.csdn.net/qq_33572444/article/details/79106935

27.有一个数组，里面包对象，如何判断类似的2个数组相等
扩展运算符…

28. js事件循环机制(EventLoop) , 及宏任务 (macro task) 和 微任务 (micro task)

29. ES6种的set(),和map()

可参考：
https://blog.csdn.net/xieanna123/article/details/10554575

https://www.runoob.com/w3cnote/front-end-developer-questions-and-answers.html