前端面试题整理13

目录

1.React中组件的性能优化有哪些？

2.React中常用hook有哪些？分别有什么作用？

3.React中useCallback和useMemo的区别？

4.React中什么是HOC？使用场景有哪些？

5.项目中常见的状态码有哪些？都是什么？

6.什么是协商缓存？什么是强缓存？

7.组件二次封装的方案是什么？具体封装思路？

8.Vue的路由守卫是如何运行的？

9.em、rem、px、vw、vh的区别？

10.useEffect几种使用方式？项目中如何处理副作用的？

---

1.React中组件的性能优化有哪些？

• 使用shouldComponentUpdate或者React.memo进行组件的浅比较，以减少不必要的渲染。
• 将组件进行拆分，减少单个组件的复杂度。
• 懒加载组件，减少首屏渲染时间。
• 使用React提供的PureComponent或者使用函数组件代替类组件，以减少渲染时的开销。
• 使用key属性来帮助React识别哪些元素需要重新渲染。

2.React中常用hook有哪些？分别有什么作用？

• useState：管理组件的状态。
• useEffect：处理副作用，比如网络请求或者订阅事件。
• useContext：共享全局状态。
• useRef：获取DOM元素或者保存组件的引用。
• useMemo：缓存计算结果，避免不必要的重复计算。
• useCallback：缓存函数，避免不必要的重复创建。

3.React中useCallback和useMemo的区别？

useCallback和useMemo都可以用来缓存结果，本质上useCallback是对useMemo做了一层包装，作用都是通过判断依赖项是否改变来决定是否更新值。但useCallback返回的是一个函数，useMemo返回的是一个值。useMemo一般通过减少不必要的复杂计算来优化性能，useCallback一般用于给子组件传递回调函数时，减少子组件的渲染次数，从而优化性能。

4.React中什么是HOC？使用场景有哪些？

HOC（Higher-Order Component）是一个函数，接受一个组件作为参数，返回一个新的组件。HOC可以用来增强组件的功能，比如添加路由守卫、添加数据请求等等。使用场景包括但不限于：鉴权、日志记录、性能优化等等。

5.项目中常见的状态码有哪些？都是什么？

• 200：请求成功。
• 400：请求参数错误。
• 401：请求需要身份验证。
• 403：请求被服务器拒绝。
• 404：请求的资源不存在。
• 500：服务器内部错误。

6.什么是协商缓存？什么是强缓存？

强缓存和协商缓存都是浏览器缓存的策略。

强缓存是指浏览器直接从本地缓存中获取资源，不需要向服务器发送请求。

协商缓存是指浏览器向服务器发送请求，服务器会根据请求中的信息来判断是否需要返回新的资源。

7.组件二次封装的方案是什么？具体封装思路？

• 继承原有组件：通过继承原有组件，并在子组件中增加额外的功能，来实现二次封装。
• 组件组合：通过组合多个已有组件，来创建一个新的组件，实现二次封装。
• Props代理：通过修改Props的值，来增强原有组件的功能。

具体封装思路：

1. 抽象组件功能：首先需要对组件进行抽象，确定组件的功能和业务场景，进而定义组件的 API 和参数。

2. 封装公共逻辑：对于一些公共的逻辑，可以将其封装成方法或者工具函数，便于组件的复用和维护。

3. 增强组件功能：对于一些缺陷或者不足的地方，可以通过增强组件的功能来解决，例如增加事件监听、添加动画效果等。

4. 提供样式定制：提供组件的样式定制选项，可以让用户根据不同的业务场景和需求，自定义组件的样式，提高组件的可定制性。

5. 文档和测试：最后需要编写完整的文档和测试用例，确保组件的质量和稳定性。

8.Vue的路由守卫是如何运行的？

Vue的路由守卫是通过在路由配置中定义beforeEach、beforeResolve、afterEach等生命周期函数来实现的。在路由切换时，Vue会依次执行这些生命周期函数，从而实现路由守卫的功能。

9.em、rem、px、vw、vh的区别？

• px是像素单位，是固定的，不随浏览器缩放而变化。
• em是相对单位，相对于父元素的字体大小来计算。
• rem也是相对单位，相对于根元素的字体大小来计算。
• vw是相对单位，相对于视口宽度的百分比。
• vh是相对单位，相对于视口高度的百分比。

10.useEffect几种使用方式？项目中如何处理副作用的？

useEffect有三种使用方式：①不传第二个参数：组件每次更新时都会执行useEffect。

                                            ②传入空数组：组件只在挂载和卸载时执行useEffect。

                                            ③传入依赖数组：组件只在依赖项发生变化时执行useEffect。

在项目中，我们通常会使用useEffect来处理副作用，比如网络请求、订阅事件、手动更新DOM等。为了避免内存泄漏，我们需要在组件卸载时清除副作用。通常可以在useEffect中返回一个函数，这个函数会在组件卸载时执行。