前端面试题11-CSDN博客

本文链接：https://blog.csdn.net/weixin_57837275/article/details/149400576

91、Vue中如何使用路由

安装Vue Router：
如果你还没有安装Vue Router，首先通过npm（Node Package Manager）在项目中安装它：
```
npm install vue-router
```
导入Vue Router：
在项目主入口文件（通常为src/main.js）中导入Vue Router库：
```
import Vue from 'vue'
import VueRouter from 'vue-router'
```

初始化Vue Router：
配置路由规则，并创建路由实例。例如：

// 定义路由组件
import HomeComponent from './views/Home.vue'
import AboutComponent from './views/About.vue'

// 定义路由
const routes = [
  { path: '/', component: HomeComponent, name: 'Home' },
  { path: '/about', component: AboutComponent, name: 'About' }
]

// 创建并安装路由
Vue.use(VueRouter)

const router = new VueRouter({
  routes,
  mode: 'history' // 根据需求设置模式，默认为hash模式，也可以是history模式
})

整合到Vue实例：
在Vue实例化时，将router注入到Vue应用中：

new Vue({
  router, // 将路由实例挂载到Vue实例上
  render: h => h(App) // 假设App是你的根组件
}).$mount('#app') // 挂载到HTML元素上，比如id为'app'的div

在模板中使用路由：
在Vue组件中，可以使用 <router-link> 组件来创建导航链接：
```
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
```

渲染路由组件：
在你想显示路由对应的组件的地方使用 <router-view> 标签：

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <!-- 导航链接 -->
    </nav>
    <main>
      <!-- 路由匹配到的组件会渲染在这里 -->
      <router-view></router-view>
    </main>
  </div>
</template>

这样，当你点击导航链接或者改变URL时，Vue Router会自动匹配相应的路由并渲染出对应的组件。

此外，Vue Router还支持路由参数传递、嵌套路由、动态路由匹配、编程式导航、导航守卫等功能，可以根据具体需求进行更深入的配置和使用。

92、微信扫二维码登录流程

准备阶段：
- 在微信开放平台（https://open.weixin.qq.com/）注册成为开发者并创建应用。
- 为您的网站应用申请微信登录功能，提交相关资料并通过审核，获取到对应的 AppID 和 AppSecret。
- 配置回调域名（也称为 OAuth 回调地址），即用户授权后微信服务器返回用户信息的网址。
生成登录二维码：
- 使用 AppID 向微信服务器请求一个临时登录二维码，通常会携带重定向URL或state参数来确保后续流程的安全性和正确性。
用户操作：
- 前端展示微信登录二维码供用户扫描。
- 用户使用手机微信扫描二维码后，微信客户端会显示确认登录界面，用户点击确认登录。
微信服务器交互：
- 用户确认登录后，微信客户端将用户的微信账号信息与该次登录的唯一标识符（session_key或code）发送给微信服务器。
- 微信服务器根据预设的回调域名，向该地址发起POST请求，传递登录凭证code。
服务端处理：
- 服务端接收到微信的回调请求后，使用接收到的code和AppID、AppSecret从微信API换取Access Token和OpenID。
- 通过Access Token和服务端再次向微信API请求获取用户的基本信息。
前端响应：
- 服务端验证成功后，可能通过先前设置的重定向地址或者前端轮询检查登录状态的方式来通知前端登录成功。
- 前端收到服务端的响应后，解除登录loading状态，并根据服务端返回的信息自动登录用户账户或继续其他必要的业务逻辑处理。

总结一下，前端实现微信扫码登录的关键在于与后端配合，展示微信提供的登录二维码，然后监听后端对于微信回调的处理结果，进而完成用户的登录流程。同时，整个过程中要注意安全策略的实施，如对敏感信息加密、防止CSRF攻击等。

93、有哪些缓存机制，它们是怎么提升网站性能的

HTTP 缓存机制
- 强缓存 (Cache-Control & Expires Header)：浏览器根据服务器在响应头中设置的 Cache-Control 或 Expires 头信息决定是否可以直接从本地缓存中获取资源，而不发起任何请求到服务器。例如，通过设置max-age指示缓存的有效期。
- 协商缓存 (ETag & Last-Modified Header)：当强缓存未命中的时候，浏览器会发送条件请求到服务器，携带If-None-Match 或 If-Modified-Since 请求头。服务器基于资源的 ETag 或 Last-Modified 时间戳判断资源是否更新，如果没有变化，则返回304 Not Modified，浏览器继续使用本地缓存。
浏览器缓存
- Disk Cache（磁盘缓存）：浏览器会把部分静态资源（如图片、CSS、JS文件等）保存到本地磁盘上，下次访问时直接读取，无需网络传输。
- Memory Cache（内存缓存）：最近使用的资源可能保存在内存中，这样下次加载时速度更快。
Service Workers
- Service Worker 是一种运行在浏览器后台独立于网页的脚本，它可以拦截和处理网络请求，实现离线缓存和Push消息等功能。通过创建离线缓存策略，可以使得在离线状态下也能访问站点的部分资源。
IndexedDB
- 虽然不是严格意义上的缓存机制，但IndexedDB允许在浏览器端持久化大量结构化数据，可用于更复杂的应用场景，如缓存动态生成的内容或离线数据。
localStorage 和 sessionStorage
- 这两种Web Storage API主要用于存储少量客户端数据，虽然它们并非设计用于缓存整个网页资源，但在某些情况下也可以用来缓存应用程序相关的轻量级数据，从而避免重复请求。

这些缓存机制提升了网站性能的方式主要有：

减少网络往返时间：不再每次都需要请求服务器，从而降低延迟和带宽消耗。
提高响应速度：从本地缓存读取资源比从远程服务器下载快得多，特别是对于重复访问的资源。
减轻服务器压力：尤其是当多个用户访问相同资源时，服务器可以集中精力处理非缓存请求。
支持离线浏览：通过Service Workers的离线缓存功能，即使在网络不稳定或断开连接的情况下也能提供部分功能。

通过合理利用上述缓存策略，前端开发者可以有效地优化网页加载速度，改善用户体验，并节约服务器资源。

94、如何实现一个文件直接访问的URL并不是最终需要访问的URL

重定向 (Redirection)
当用户尝试访问某个特定URL时，服务器可以通过返回HTTP状态码301（永久重定向）或302（临时重定向）及Location响应头来告诉浏览器应该去请求另一个URL。例如，用户点击/resourceA，但实际上服务器会将其重定向至/resourceB。
路由转发 (Routing)
在单页应用（SPA，Single Page Application）中，前端框架（如React Router、Vue Router等）可以根据定义好的路由规则，在不刷新整个页面的情况下，根据不同的URL路径映射到不同的组件或者逻辑，展示不同的内容。尽管用户看到的URL在地址栏中改变，实际上并未发生完整的页面重新加载，而是前端应用内部进行了跳转。
代理 (Proxy)
开发环境下，前端服务器（如webpack-dev-server或create-react-app自带的开发服务器）可能会设置代理规则，当请求特定资源时，会被代理到实际的服务器地址。例如，前端代码中请求的是/api/data，而实际上这个请求被转发到了http://backendserver.com/data。
CDN（内容分发网络）
在生产环境中，静态资源（如图片、CSS、JS等）可能会托管在CDN上，前端引用的是CDN提供的URL，而不是源服务器的直接URL。CDN会自动将请求指向最优的服务器节点，提高资源加载速度。
URL短链接或别名
可能存在一些短链接服务，将长或复杂的URL转换为简短易记的URL，点击短链接后，服务器会解析并重定向到实际的目标URL。
中间件(Middleware)
在服务器端，比如Node.js的Express框架中，可以使用中间件来捕获特定的URL请求，并按照业务逻辑重定向或代理到其它URL。

因此，即便前端直接访问的URL看起来不是最终资源的位置，通过上述技术手段仍然可以确保用户得到预期的资源或服务。

95、什么是Web3

Web3，全称Web 3.0，是互联网发展的下一阶段愿景，旨在构建一个更加去中心化、自主化、透明化和安全的网络环境。这一概念强调用户对自身身份、数据和资产的控制权，以及通过去中心化技术实现服务和价值交换的中介化最小化。以下是Web3的主要特征和组成部分：

去中心化架构： Web3的核心理念是打破传统的客户端-服务器模式，转向分布式或对等网络结构。这种架构不依赖单一的中心化机构或服务器来存储和处理数据，而是利用区块链技术（尤其是公有链，如以太坊）作为底层基础设施。区块链提供了一个公开透明、不可篡改的账本，使得数据和交易能够在参与者之间直接、可信地进行。

区块链与智能合约： 以太坊是Web3生态系统中的关键角色，作为一个开放的区块链平台，它支持开发和部署智能合约。智能合约是自动执行特定条件的程序，允许在无需中间人的情况下完成复杂的逻辑和交易。这包括但不限于金融交易、投票、身份验证、供应链追踪等应用。智能合约确保了规则的透明执行，增强了信任和效率，减少了对传统中介机构的依赖。

去中心化应用（DApps）： 基于区块链和智能合约，开发者可以构建去中心化应用程序（DApps）。这些应用不受单一实体控制，用户可以直接与DApp交互，而无需通过中心化的服务平台。DApps涵盖众多领域，如金融服务（DeFi）、游戏、社交媒体、市场places等，它们通常利用加密货币或代币作为内部经济系统的流通媒介。

数字身份与自主数据所有权： 在Web3中，用户能够拥有并控制自己的数字身份，而不依赖于第三方平台颁发的身份凭证。用户数据不再集中存储在大型科技公司的服务器上，而是由用户自己保管或通过去中心化存储解决方案（如IPFS）分散存储。用户可以选择如何分享、授权使用其数据，甚至可能通过加密、零知识证明等技术实现隐私保护下的数据交换。

加密资产与经济激励： Web3生态中广泛使用加密货币（如以太币、比特币）和非同质化代币（NFTs）作为价值存储、交换媒介和权益证明。这些数字资产为用户在去中心化环境中提供了经济激励，促进了网络的参与和贡献。此外，Web3还探讨了“灵魂绑定代币”（SBTs）的概念，这类代币不可转让，可用于表示个人声誉、成就或特定关系，对实体经济的信任网络进行编码。

跨平台互操作性与开放标准： Web3倡导开放标准和协议，促进不同区块链、DApp和服务之间的互操作性。这意味着用户可以在不同的Web3环境中无缝迁移其数字身份、资产和数据，无需受制于某一平台的封闭生态系统。

技术堆栈与扩展性解决方案： Web3的技术栈包括底层区块链、中间件（如Layer 2解决方案、侧链）、前端接口（如钱包、浏览器插件）以及各种开发工具和框架。为了应对区块链的可扩展性和效率挑战，Web3生态系统不断发展各种扩容技术，如分片、状态通道、Rollups等，以提高交易处理速度和降低费用。

综上所述，Web3是一个旨在通过区块链、加密技术、去中心化协议和应用重新定义互联网运作模式的概念，目标是赋予用户更大的自主权、隐私保护和价值创造能力，同时推动互联网向更加透明、公正和民主的方向演进。尽管Web3尚处于发展阶段，面临技术、监管、用户体验等方面的挑战，但它代表了对未来互联网形态的一种探索和追求。

96、Vue3组件的生命周期

setup()
- 触发时机：在组件实例创建之初，但在 beforeCreate 和 created 之前执行。
- 作用：这是 Vue 3 引入的一个新特性，用于替代 Vue 2 中的部分选项（如 data、methods）来初始化状态和定义响应式逻辑。在 setup() 函数中可以访问 props、context（包含 attrs、slots、emit 等），并返回用于模板渲染的数据或方法。
onBeforeMount()
- 触发时机：在组件即将被挂载到 DOM 节点之前，Vue 已经完成了模板编译并生成了虚拟 DOM。
- 作用：适合进行一些与 DOM 相关的准备工作，如调整组件尺寸、预加载资源等，但此时真实的 DOM 还未生成，不能直接操作。
onMounted()
- 触发时机：在组件成功挂载到 DOM 后，真实 DOM 已经生成并可供操作。
- 作用：进行依赖于真实 DOM 的操作，如第三方库的初始化、DOM 查询、添加事件监听器等。
onBeforeUpdate()
- 触发时机：当组件数据发生变化但尚未重新渲染 DOM 时。
- 作用：可以在此阶段执行一些基于旧数据的计算或清理工作，或者手动干预更新过程。
onUpdated()
- 触发时机：组件完成数据更新并重新渲染 DOM 后。
- 作用：进行依赖于新渲染 DOM 的操作，或者进行更新后的状态检查及额外的DOM操作。
onBeforeUnmount()
- 触发时机：组件即将被从 DOM 中卸载时。
- 作用：进行必要的清理工作，如注销事件监听器、清除定时器、取消网络请求等，以防止内存泄漏。
onUnmounted()
- 触发时机：组件已经被从 DOM 中卸载。
- 作用：通常无需在此钩子中执行操作，因为在 onBeforeUnmount() 中已进行了必要的清理。但在某些情况下，如果需要在组件完全卸载后执行特定逻辑，可以在此钩子中处理。

97、UniApp路由跳转方法

uni.navigateTo
- 行为：保留当前页面，跳转到应用内的另一个非 tabBar 页面。
- 特点：
  - 跳转后，用户可以通过点击设备上的返回按钮或者调用 uni.navigateBack() 方法返回到原来的页面。
  - 类似网页超链接跳转，形成“栈式”导航结构，新页面被压入历史记录栈。
  - 支持传递参数给目标页面。
uni.redirectTo
- 行为：关闭当前页面，跳转到应用内的另一个非 tabBar 页面。
- 特点：
  - 跳转后，用户无法通过设备返回按钮回到原来的页面，即关闭了原页面与新页面之间的回退路径。
  - 不支持打开 tabBar 页面。
  - 适用于需要彻底替换当前页面场景，且不希望用户能通过返回操作回到原页面的情况。
  - 同样支持传递参数。
uni.reLaunch
- 行为：关闭所有当前页面，打开应用内的任意页面（包括 tabBar 页面）。
- 特点：
  - 清空整个导航栈，重新启动一个新的导航堆栈序列。
  - 无论当前处于多层嵌套的页面结构中，都会直接跳转到指定页面，且原页面不会保留在历史记录中。
  - 适用于从一个独立模块跳转到另一个独立模块，或者需要清除所有历史记录、重新开始一个新的导航流程的场景。
  - 支持传递参数。
uni.switchTab
- 行为：跳转到应用内已注册的 tabBar 页面，并关闭其他所有非 tabBar 页面。
- 特点：
  - 专门用于切换至底部 tabBar 区域的固定页面，通常这些页面在应用中具有较高的层级和复用性。
  - 如果目标 tabBar 页面已经在栈顶，则不会进行任何跳转。
  - 由于 tabBar 页面通常是应用的主界面之一，此方法不会增加新的历史记录，用户点击设备返回按钮不会离开 tabBar 页面。
  - 也支持传递参数给目标 tabBar 页面。
uni.navigateBack
- 行为：返回上一页面或多级页面。
- 特点：
  - 用于从当前页面回退到前一个页面，根据参数可指定回退的页面数量。
  - 与 uni.navigateTo 配合使用，实现页面间的前进后退导航。
  - 不涉及直接跳转到新的页面，而是撤销先前的跳转操作。

98、修改 Element UI 组件样式的方法

使用自定义主题工具（Element Theme）
- 方法：利用 Element UI 提供的官方工具 element-theme 或 element-cli，通过配置 SCSS 变量文件来调整全局主题色、字体、边距、尺寸等基础样式。
- 步骤：
  - 安装相关工具。
  - 创建或编辑主题变量文件（如 _variables.scss），覆盖 Element UI 默认的变量值。
  - 运行主题生成命令，工具会根据变量文件生成对应的 CSS 文件，将其引入到项目中即可。
CSS 样式穿透（/deep/ 或 ::v-deep）
- 方法：在组件的局部 CSS 中使用 /deep/ 或 ::v-deep（Vue 3 推荐使用 ::v-deep）进行样式穿透，以覆盖组件内部的样式。
- 示例：
  
  Css
```
1/* Vue 2 */
2<style scoped>
3  /deep/ .el-button {
4    background-color: red;
5  }
6</style>
7
8/* Vue 3 */
9<style scoped>
10  ::v-deep .el-button {
11    background-color: red;
12  }
13</style>
```
- 注意事项：
  - ::v-deep 适用于有 scoped 属性的样式块，用于穿透组件作用域限制，影响子组件样式。
  - 随着 Vue 3 对 Shadow DOM 兼容性的改进，未来可能推荐使用 :global() 语法代替 ::v-deep。
单独引入组件 CSS 文件
- 方法：对于需要定制的特定组件，可以选择手动引入该组件的 CSS 文件，然后在项目中对其进行覆盖。
- 步骤：
  - 查找需要修改样式的 Element UI 组件对应的 CSS 文件。
  - 在项目中引入该文件，然后在其后面或单独的 CSS 文件中定义相同选择器的样式以覆盖原有样式。
全局 CSS 文件
- 方法：创建一个全局 CSS 文件（如 global.css），在其中编写针对 Element UI 组件的自定义样式，然后在项目的入口文件（如 main.js）中引入。
- 示例：
  
  Javascript
```
1// main.js
2import './assets/css/global.css';
```
- 优点：不受 scoped 限制，可以轻松覆盖组件样式，适用于需要大面积调整组件样式的场景。

使用 CSS 预处理器（如 SCSS）直接覆盖变量

方法：如果项目使用 SCSS 等预处理器，可以直接在项目的 SCSS 文件中导入 Element UI 的变量文件，并在其中覆盖所需变量。

示例：

Scss

1// variables.scss (项目自定义变量文件)
2@import '~element-ui/packages/theme-chalk/src/common/var.scss';
3
4$--color-primary: #ff0000; // 覆盖主题色
5// ... 其他变量覆盖
6
7// app.scss (项目主 SCSS 文件)
8@import 'variables.scss';
9@import '~element-ui/packages/theme-chalk/src/index.scss'; // 引入 Element UI 样式

直接修改组件类名或添加自定义类
- 方法：在 HTML 结构中找到需要修改样式的 Element UI 组件的类名，直接在 CSS 文件中针对这些类名编写样式。或者为组件添加自定义类，通过自定义类来覆盖原有样式。
- 示例：
  
  Html
```
1<el-button class="custom-button">按钮</el-button>
```
  Css
```
1.custom-button {
2  background-color: red;
3}
```

99、怎么减少重绘

合并样式更改：
- 尽可能一次性完成多个样式更改，而不是分散在不同的函数或事件回调中。可以使用定时器（如 setTimeout 设置为 0）将样式更新推迟到当前任务队列末尾，确保连续的样式变更被合并成一次重绘。
使用 requestAnimationFrame：
- 对于动画或持续更新样式的情况，使用 requestAnimationFrame 函数来安排样式更新。它会在下一次重绘之前触发回调，有助于浏览器将多个相关的样式更改合并到同一帧中，从而减少不必要的重绘。
避免不必要的 style 属性赋值：
- 直接操作 element.style.property 会引起重绘。尽量使用 CSS 类（通过 classList.add、classList.remove 或 classList.toggle）来切换样式，这样浏览器可以更高效地处理样式变化。
使用 will-change 属性：
- 对于即将发生变化的元素，使用 will-change 属性提前告知浏览器，使其能够在元素真正变化前做出优化准备，如创建硬件加速层，减少后续重绘的影响。但要谨慎使用，仅对确实会发生且频繁变化的属性声明，过度使用可能导致额外资源消耗。
CSS3 动画与 transitions：
- 使用 CSS3 动画 (@keyframes) 和 transitions 替代 JavaScript 实现动画效果。浏览器会对这些原生动画进行优化，通常在单独的合成线程中处理，避免阻塞主线程并减少重绘。
利用 transform 和 opacity：
- 修改 transform 和 opacity 属性通常不会触发回流，只会引起重绘。利用它们进行动画和位置变换可以显著降低性能开销。尤其是 transform，当应用于 position: fixed 或 position: absolute 的元素时，还能进一步利用硬件加速。
减少复杂布局和视觉效果：
- 简化页面设计，避免复杂的盒模型、过多的渐变、阴影、透明度等效果，这些都可能导致更频繁或更复杂的重绘。
隐藏不需要渲染的元素：
- 当对不在视口内的元素（如滚动出去的内容）进行大量样式更新时，可以暂时将其 display 属性设为 none，待更新完成后再恢复显示。这样可以避免对不可见元素的无效重绘。
使用 document fragments 进行批量DOM操作：
- 对于大量新元素的插入，先在文档片段（DocumentFragment）中构建好DOM结构，再一次性将其插入到实际文档中，可以减少中间状态引起的重绘。
虚拟 DOM 技术：
- 如果使用 React、Vue 等框架，它们内置的虚拟 DOM 算法能自动对比前后状态的差异，并最小化实际 DOM 更新，从而有效减少重绘。

100、React常用Hooks

React Hooks 是一种特殊函数，允许你在不编写类的情况下使用状态和其他 React 特性（如生命周期方法）。自 React 16.8 版本引入以来，Hooks 已经变得非常流行，并且极大地改变了 React 组件的编写方式。以下是一些常用的 React Hooks：

useState()
- 这是最基本的 Hook，用于在函数组件中添加状态。它返回一个状态值和一个更新该状态的函数。
```
const [count, setCount] = useState(0);
```
useEffect()
- 这个 Hook 让你可以执行副作用操作，比如数据获取、订阅或手动 DOM 操作等。它接收两个参数：一个是要执行的函数，另一个是一个依赖项数组（当数组中的某个依赖项变化时，副作用函数将被重新执行）。
```
useEffect(() => {
  // 副作用代码
}, [/* 依赖项 */]);
```
useContext()
- 提供了一种无需层层传递 props 就能让组件访问上下文的方法。这对于全局设置主题、语言等场景特别有用。
```
const value = useContext(MyContext);
```
useReducer()
- 对于复杂的状态逻辑，useReducer 可以作为 useState 的替代方案。它更适合管理涉及多个子值的状态，或者下一个状态依赖于之前的状态的情况。
```
const [state, dispatch] = useReducer(reducer, initialState);
```
useCallback()
- 返回一个回调函数的 memoized 版本，仅在依赖项改变时才会更新。这可以用来优化性能，防止不必要的渲染。
```
const memoizedCallback = useCallback(() => {
  // 返回的函数
}, [/* 依赖项 */]);
```
useMemo()
- 类似于 useCallback，但用于记忆计算结果而不是函数本身。当依赖项不变时，会返回缓存的结果，从而避免昂贵的计算。
```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
useRef()
- useRef 返回一个可变的引用对象，其 .current 属性初始化为你传递的参数（initialValue）。这个对象在整个组件的生命周期内保持不变，因此非常适合用于存储不需要触发重渲染的数据。
```
const refContainer = useRef(initialValue);
```
useImperativeHandle()
- 自定义暴露给父组件的实例值。与 forwardRef 一起使用，可以让父组件能够调用子组件中的方法。
```
useImperativeHandle(ref, () => ({
  focus: () => {
    // 自定义focus行为
  }
}), []);
```

101、React类组件生命周期方法

在 React 类组件中，生命周期方法允许你在组件的不同阶段执行代码。这些方法可以分为几个主要阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）以及错误处理（Error Handling）。以下是各个阶段及其对应的方法：

1、挂载阶段（Mounting）

当组件实例被创建并插入到 DOM 中时调用。

constructor()
- 构造函数，在组件初始化时调用。通常用于设置初始状态和绑定事件处理器。
static getDerivedStateFromProps()
- 在调用 render 方法之前调用。它返回一个对象以更新 state，或者返回 null 以表明新的 props 不需要更新任何 state。
render()
- 必须的，用于描述组件的 UI 结构。不能包含副作用操作。
componentDidMount()
- 组件挂载后（插入 DOM 树中）立即调用。适合发起网络请求、添加订阅等操作。

2、更新阶段（Updating）

当组件接收到新的 props 或 state 导致重新渲染时调用。

static getDerivedStateFromProps()
- 同样在更新阶段调用，逻辑与挂载阶段相同。
shouldComponentUpdate()
- 在组件发生重新渲染前调用，决定是否需要更新组件，默认返回 true。优化性能时可以在此做判断，避免不必要的渲染。
render()
- 如同挂载阶段，再次渲染组件。
getSnapshotBeforeUpdate()
- 在最近一次渲染输出提交给 DOM 前调用，用于捕获一些 DOM 信息（如滚动位置），这些信息可能在更新后变得不可用或不准确。
componentDidUpdate()
- 更新完成后立即调用。适合在此处进行网络请求或其他依赖于 DOM 的操作，但要注意避免无限循环。

3、卸载阶段（Unmounting）

当组件从 DOM 中移除时调用。

componentWillUnmount()
- 执行必要的清理工作，比如清除定时器、取消网络请求或注销事件监听器。

4、错误处理（Error Handling）

当组件内部抛出错误时调用，也可以捕获子组件树中的错误。

static getDerivedStateFromError()
- 这个方法在后代组件抛出错误后调用，允许你更新 state 以便下次渲染能够显示降级 UI。
componentDidCatch()
- 同样在后代组件抛出错误后调用，除了可以记录错误信息外，还可以执行其他副作用操作，例如发送错误报告。

随着 React Hooks 的引入，尤其是 useEffect 和 useState 等 Hook 的出现，越来越多的新项目倾向于使用函数组件和 Hooks 来代替类组件，因为它们提供了更简洁和灵活的方式来管理组件的生命周期和状态。然而，理解类组件的生命周期方法仍然是非常有价值的，尤其是在维护旧项目时。

102、React项目怎么做懒加载

在React项目中实现懒加载（也称为代码拆分或按需加载）通常使用动态导入（dynamic imports）和React的lazy与Suspense功能来实现。以下是实现步骤：

使用React.lazy：React.lazy函数允许你定义一个动态导入作为常规组件一样使用。这会告诉React在组件实际需要渲染时再去加载该组件的代码。
```
const LazyComponent = React.lazy(() => import('./path/to/LazyComponent'));
```
使用Suspense组件：Suspense让你可以设置一个“后备UI”（例如，一个加载指示器），用于在React加载新引入的组件时显示。
```
<React.Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</React.Suspense>
```

路由级别的懒加载：如果你正在使用React Router进行路由管理，你可以对每个路由对应的组件应用懒加载。这样，只有当用户导航到特定路由时，才会加载相应的组件。

举个例子，如果你使用的是react-router-dom，你可以这样做：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </React.Suspense>
    </Router>
  );
}

注意点：使用React.lazy和Suspense目前只支持在文件系统中通过静态分析能够找到的导入路径。这意味着它们不支持条件加载逻辑中的动态路径字符串。如果需要更复杂的懒加载策略，可能需要考虑其他库如loadable-components，它提供了更多高级功能和更好的SSR（服务器端渲染）支持。

通过这些步骤，你可以有效地减少初始加载时间，提高应用性能，特别是对于大型应用程序或者拥有许多页面/组件的应用来说尤为重要。

103、网络请求工具怎么封装

封装网络请求工具可以让你的应用程序更加模块化、易于维护，并且能够简化代码重复。下面以JavaScript环境为例，介绍如何使用axios库来封装一个通用的网络请求工具。axios是一个流行的基于Promise的HTTP客户端，适用于浏览器和Node.js。

1. 安装Axios

首先，你需要安装axios：

npm install axios

2. 创建请求工具

创建一个新的文件，比如叫api.js，在这个文件中进行封装。

import axios from 'axios';

// 创建axios实例
const apiClient = axios.create({
  baseURL: 'https://api.example.com', // 基础URL
  timeout: 1000,                      // 请求超时时间
  headers: {'Content-Type': 'application/json'} // 默认请求头
});

// 请求拦截器
apiClient.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
apiClient.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data; // 直接返回数据部分
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在2xx范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // 什么东西都没收到
      console.log('Error', error.message);
    }
    return Promise.reject(error);
  }
);

// 封装请求方法
export default {
  get(endpoint, params) {
    return apiClient.get(endpoint, {params});
  },
  post(endpoint, data) {
    return apiClient.post(endpoint, data);
  },
  put(endpoint, data) {
    return apiClient.put(endpoint, data);
  },
  delete(endpoint) {
    return apiClient.delete(endpoint);
  }
};

3. 使用封装好的请求工具

在你的组件或者服务中导入并使用这个封装好的API工具：

import api from './api';

// GET 请求示例
api.get('/users')
  .then(response => console.log(response))
  .catch(error => console.error(error));

// POST 请求示例
api.post('/users', {name: 'John Doe', email: 'john@example.com'})
  .then(response => console.log(response))
  .catch(error => console.error(error));

通过这种方式封装网络请求，你可以轻松地管理所有的网络请求逻辑，包括设置全局配置（如基础URL、超时等）、添加请求/响应拦截器以及处理错误等。这不仅让代码更清晰，也便于后期维护和扩展。

104、socket.io具体的使用方法

Socket.IO 是一个强大的库，用于实现实时的双向通信。它不仅支持WebSocket协议，还提供了回退机制以兼容不支持WebSocket的环境，比如使用HTTP长轮询作为替代方案。以下是具体使用Socket.IO的方法，包括服务器端和客户端的基本设置以及一些常见的操作示例。

1、服务端设置

首先，确保你已经安装了Node.js和npm。然后，在你的项目中安装socket.io：

npm install socket.io

接下来，创建你的服务器文件（例如server.js），并设置Socket.IO：

const http = require('http');
const { Server } = require("socket.io");

// 创建HTTP服务器
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, World!');
});

// 绑定Socket.IO到HTTP服务器
const io = new Server(server);

io.on('connection', (socket) => {
  console.log('New client connected');

  // 发送欢迎消息给新连接的客户端
  socket.emit('welcomeMessage', 'Welcome to the server!');

  // 监听来自客户端的消息
  socket.on('clientMessage', (data) => {
    console.log(data);
    // 广播消息给所有连接的客户端（除了发送者）
    socket.broadcast.emit('serverMessage', data);
  });

  // 当客户端断开连接时触发
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

server.listen(3000, () => console.log('Server is running on port 3000'));

2、客户端设置

在客户端，你可以通过HTML文件加载Socket.IO客户端脚本，并建立与服务器的连接。如果你的服务端和前端在同一台机器上运行，可以通过以下方式引入：

<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO Client</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io('http://localhost:3000');

        // 监听欢迎消息
        socket.on('welcomeMessage', (msg) => {
            console.log(msg); // 输出: Welcome to the server!
        });

        // 发送消息给服务器
        function sendMessageToServer() {
            const message = document.getElementById('message').value;
            socket.emit('clientMessage', message);
        }

        // 监听来自服务器的消息
        socket.on('serverMessage', (msg) => {
            console.log('Message from server:', msg);
        });
    </script>
</head>
<body>
    <input type="text" id="message">
    <button onclick="sendMessageToServer()">Send Message</button>
</body>
</html>

3、常见用法

命名空间：允许你在同一个物理连接上创建多个逻辑连接。
房间(Rooms)：让你能够轻松地广播消息给特定的用户组。例如，加入一个房间socket.join('room1')，然后向该房间发送消息io.to('room1').emit('some event')。
事件监听器：除了默认的connect, disconnect, 和自定义事件外，你还可以监听其他内置事件如error等。

以上就是使用Socket.IO进行实时双向通信的基础指南。通过这些基本步骤，你可以构建各种实时应用，如聊天室、在线游戏等。对于更复杂的需求，请参考官方文档，获取更多高级功能和配置选项的信息。

105、怎么做权限控制

权限控制是确保系统安全的关键部分，它决定了谁可以访问哪些资源或执行哪些操作。权限控制可以通过多种方式实现，具体取决于你的应用架构和技术栈。以下是一些常见的权限控制策略和实现方法：

1. 基于角色的访问控制 (RBAC)

这是最常用的权限控制模型之一。在这个模型中，用户被分配到不同的角色，每个角色有特定的权限。通过这种方式，可以轻松地管理大量用户的权限。

定义角色：首先定义系统中的不同角色（如管理员、编辑者、查看者等）。
分配角色给用户：为每个用户分配一个或多个角色。
定义权限：为每个角色分配相应的权限（例如，创建、读取、更新、删除等）。

在React应用中，你可以使用类似react-router结合自定义逻辑来保护路由，或者使用状态管理库（如Redux）来存储用户的角色信息，并根据这些信息来决定是否渲染某些组件或执行某些操作。

2. 基于属性的访问控制 (ABAC)

ABAC是一种更加灵活的访问控制模型，它不仅考虑了用户的角色，还考虑了其他属性，如时间、地点、设备类型等。

定义属性：确定哪些属性将用于做决策（例如，用户ID、角色、位置等）。
制定策略：基于这些属性制定访问控制策略。

3. OAuth 和 OpenID Connect

对于需要与第三方服务集成的应用，OAuth和OpenID Connect是非常有用的协议。它们允许你安全地验证用户身份并获取有限的访问令牌来代表用户执行操作。

实现示例

这里提供一个简单的RBAC实现示例，在React应用中如何进行权限检查：

// 定义角色权限
const roles = {
  admin: ['create', 'read', 'update', 'delete'],
  editor: ['read', 'update'],
  viewer: ['read']
};

// 检查权限函数
function hasPermission(userRole, permission) {
  return roles[userRole]?.includes(permission);
}

// 在组件中使用
function SecureComponent({ userRole }) {
  if (!hasPermission(userRole, 'read')) {
    return <div>无权访问</div>;
  }
  return <div>欢迎，您有权访问此内容。</div>;
}

后端权限控制

除了前端的权限控制外，后端也需要实施严格的权限检查，以防止未授权的访问。这通常涉及到验证用户提供的凭据（如JWT令牌），并检查他们是否有权执行请求的操作。

在Node.js环境中，你可以使用中间件来保护路由：

app.get('/protected-route', checkPermissions('admin'), (req, res) => {
  res.send('This route is protected');
});

function checkPermissions(role) {
  return function(req, res, next) {
    const userRole = getUserRoleFromToken(req); // 自定义函数，从请求中提取用户角色
    if (roles[userRole]?.includes(role)) {
      next();
    } else {
      res.status(403).send('Forbidden');
    }
  };
}

以上就是一些关于如何实现权限控制的基本思路和示例代码。具体的实现细节会根据你的项目需求和技术栈有所不同。务必确保在设计权限控制系统时考虑到安全性，避免出现安全漏洞。

106、怎么做按钮级的权限控制

在前端实现按钮级别的权限控制，主要是根据用户的权限动态显示或隐藏某些按钮，或者禁用它们。这可以通过多种方式来实现，取决于你的应用架构和技术栈。以下是一个基于React的示例，展示如何通过检查用户角色或权限来控制按钮的显示或状态。

1. 确定权限模型

首先，你需要确定权限模型。一个简单的方法是使用基于角色的访问控制（RBAC），其中每个用户被分配到一个或多个角色，并且每个角色有特定的操作权限。

假设我们有一个简单的权限结构如下：

const permissions = {
  admin: ['create', 'edit', 'delete'],
  editor: ['edit'],
  viewer: []
};

2. 创建权限检查工具

创建一个函数来检查用户是否有执行某操作的权限。

function hasPermission(userRole, permission) {
  return permissions[userRole]?.includes(permission);
}

3. 在组件中使用权限控制

现在，你可以在React组件中使用这个权限检查工具来控制按钮的显示或状态。

示例：显示/隐藏按钮

import React from 'react';

const userRole = 'editor'; // 假设这是从后端获取的当前用户的角色

function App() {
  return (
    <div>
      {hasPermission(userRole, 'create') && <button>Create</button>}
      {hasPermission(userRole, 'edit') && <button>Edit</button>}
      {hasPermission(userRole, 'delete') && <button>Delete</button>}
    </div>
  );
}

export default App;

在这个例子中，只有当userRole具有相应的权限时，对应的按钮才会被渲染。

示例：启用/禁用按钮

如果你希望按钮总是可见，但根据权限启用或禁用它们，可以这样做：

import React from 'react';

const userRole = 'editor'; // 假设这是从后端获取的当前用户的角色

function App() {
  return (
    <div>
      <button disabled={!hasPermission(userRole, 'create')}>Create</button>
      <button disabled={!hasPermission(userRole, 'edit')}>Edit</button>
      <button disabled={!hasPermission(userRole, 'delete')}>Delete</button>
    </div>
  );
}

export default App;

4. 高级方案

对于更复杂的场景，考虑将权限管理与状态管理库（如Redux、MobX）结合使用，以便在整个应用程序中共享和管理权限信息。此外，也可以考虑开发自定义的高阶组件（HOCs）或React Hooks来简化权限检查过程。

例如，使用React Hook来封装权限检查逻辑：

import { useEffect, useState } from 'react';

function useUserPermissions(userRole) {
  const [permissionsState, setPermissions] = useState({});

  useEffect(() => {
    const fetchPermissions = async () => {
      // 模拟异步获取权限数据
      const fetchedPermissions = permissions[userRole];
      setPermissions(fetchedPermissions);
    };

    fetchPermissions();
  }, [userRole]);

  return (permission) => !!permissionsState[permission];
}

function App() {
  const can = useUserPermissions('editor');

  return (
    <div>
      <button disabled={!can('create')}>Create</button>
      <button disabled={!can('edit')}>Edit</button>
      <button disabled={!can('delete')}>Delete</button>
    </div>
  );
}

export default App;

这种方法可以使权限检查更加模块化和可复用。记得在实际应用中，确保从服务器安全地获取并验证用户的权限信息。

107、短信验证码登录怎么做

实现短信验证码登录通常包括前端和后端两部分的工作。下面是一个基本的流程概述，以及如何在前后端分别实现这个功能的示例。

流程概述

用户输入手机号：用户在前端页面输入手机号码。
发送验证码请求：前端将手机号发送到服务器，请求发送验证码。
生成并发送验证码：服务器生成一个随机验证码，并通过短信服务（如阿里云、腾讯云等）发送给用户的手机。
用户输入验证码：用户在前端页面输入收到的验证码。
验证验证码：前端将手机号和验证码发送到服务器进行验证。
登录成功：如果验证码正确，则认为用户验证通过，可以进行登录操作。

后端实现

首先，确保你已经接入了一个短信服务提供商API。以下是一个基于Node.js和Express框架的简化示例：

安装必要的包

npm install express body-parser

创建服务器脚本 (例如 server.js)

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

let verificationCodes = {}; // 用于存储验证码的简单内存存储

// 发送验证码接口
app.post('/send-verification-code', (req, res) => {
    const { phone } = req.body;
    if (!phone) return res.status(400).send({ message: 'Phone number is required' });

    // 生成随机验证码
    const code = Math.floor(100000 + Math.random() * 900000);
    verificationCodes[phone] = code;

    // 模拟发送验证码（实际应用中需要调用短信服务API）
    console.log(`Sending verification code ${code} to ${phone}`);

    res.send({ message: 'Verification code sent' });
});

// 验证验证码接口
app.post('/verify-code', (req, res) => {
    const { phone, code } = req.body;
    if (!phone || !code) return res.status(400).send({ message: 'Phone and code are required' });

    if (verificationCodes[phone] == code) {
        // 验证成功，执行登录逻辑
        res.send({ success: true, message: 'Login successful' });
    } else {
        res.status(400).send({ success: false, message: 'Invalid code' });
    }
});

app.listen(3000, () => console.log('Server running on port 3000'));

前端实现

前端部分主要负责收集用户输入并发送请求到服务器。

HTML页面示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SMS Login</title>
</head>
<body>
    <input type="tel" id="phone" placeholder="Enter your phone number">
    <button onclick="sendVerificationCode()">Send Verification Code</button>

    <input type="text" id="verificationCode" placeholder="Enter verification code">
    <button onclick="verifyCode()">Verify</button>

    <script src="app.js"></script>
</body>
</html>

JavaScript代码 (app.js)

function sendVerificationCode() {
    const phone = document.getElementById('phone').value;
    fetch('/send-verification-code', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ phone })
    }).then(response => response.json())
      .then(data => alert(data.message));
}

function verifyCode() {
    const phone = document.getElementById('phone').value;
    const code = document.getElementById('verificationCode').value;
    fetch('/verify-code', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ phone, code })
    }).then(response => response.json())
      .then(data => alert(data.success ? 'Login successful' : data.message));
}

请注意，上述代码仅为演示目的，在实际生产环境中，应采用更安全的方法来处理验证码（比如加密存储、设置过期时间等），并且需要使用HTTPS来保证数据传输的安全性。此外，发送验证码时要遵守相关的法律法规和隐私政策。

108、怎么给一个元素同时设置两个背景图

在CSS中，你可以为一个元素同时设置多个背景图像。这通过在background-image属性中指定多个值来实现，每个值用逗号分隔。此外，你还可以分别为这些背景图设置其他相关属性，如位置、大小和重复方式等。以下是一个示例，展示了如何给一个HTML元素设置两个背景图：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiple Backgrounds Example</title>
    <style>
        .multi-bg-example {
            width: 100%;
            height: 400px; /* 设置一个固定高度，以便可以看到效果 */
            /* 使用逗号分隔的列表为元素添加多个背景 */
            background-image: url('image1.png'), url('image2.png');
            /* 分别设置每个背景的位置 */
            background-position: center top, left bottom;
            /* 分别设置每个背景的重复方式 */
            background-repeat: no-repeat, no-repeat;
            /* 可以为每个背景图设置不同的尺寸 */
            background-size: contain, cover;
        }
    </style>
</head>
<body>

<div class="multi-bg-example"></div>

</body>
</html>

关键点说明

background-image: 使用逗号分隔的列表指定多个背景图像。
background-position: 同样使用逗号分隔的列表来分别指定每个背景图像的位置。上面的例子中，第一个背景图像是居上居中对齐，第二个是左下角对齐。
background-repeat: 指定是否及如何重复背景图像。在这个例子中，两个背景图像都不重复。
background-size: 设置背景图像的大小。上面的例子中，第一个背景图像是根据容器调整大小但保持其宽高比（contain），而第二个是覆盖整个容器可能不保持原始比例（cover）。

注意事项

确保提供的图片路径正确无误。
当设置多个背景时，列表中的第一个值总是对应于第一个背景图像（从左到右），以此类推。
如果某些背景属性只提供了一个值，则该值将应用于所有背景图像；如果提供了多个值，则它们必须与background-image属性中的背景图像数量相匹配。

这样，你就可以在一个元素上同时应用多个背景图，并灵活地控制每个背景图的位置、重复方式和其他属性。

109、网格布局和弹性盒子的区别

网格布局（CSS Grid Layout）和弹性盒子（CSS Flexbox）都是现代CSS中用于创建复杂布局的强大工具，但它们的设计目标和使用场景有所不同。以下是它们之间的主要区别：

1. 设计目标

弹性盒子（Flexbox）：主要用于在一维空间内（行或列）对元素进行布局。它非常适合用于创建响应式的单行或多行内容流，如导航栏、表单、卡片内的内容等。
网格布局（Grid）：设计用于二维空间（行和列同时）的布局控制。它可以让你更精确地定位页面上的子元素，并且非常适合构建整个页面布局，包括复杂的多列、多行布局。

2. 布局方向

Flexbox：默认情况下是基于一维的布局系统，可以沿着水平（行）或者垂直（列）方向排列项目。
Grid：是一个二维的布局系统，允许你同时在行和列上对齐元素，提供更为精细的布局控制。

3. 子元素的位置控制

Flexbox：虽然可以控制子元素如何分布空间以及它们的顺序，但在处理复杂的网格布局时相对有限。
Grid：提供了强大的位置控制能力，可以通过定义明确的网格线来精确定位每个子元素的位置。

4. 容器与子元素的关系

Flexbox：通常关注于如何分配容器内部的空间给子元素，以及这些子元素之间如何相互作用。
Grid：不仅能够控制子元素的大小和位置，还可以定义整个网格结构本身，包括网格的轨道（行和列）尺寸和间距。

5. 使用场景

Flexbox：适用于需要沿一个方向排列项目的场景，比如创建响应式导航条、对齐表单项、实现文本框内的图文混排等。
Grid：更适合构建整体页面布局，特别是当你的设计包含多个区域或区块，并且需要精确控制这些区块的大小和位置时。

总结

选择使用Flexbox还是Grid取决于具体的布局需求。如果你只需要在一个维度上管理布局，那么Flexbox可能是更好的选择；而当你需要同时在两个维度上进行精确控制时，Grid则提供了更强的功能。实际上，在实际应用中，这两种布局方式常常结合使用，以达到最佳效果。例如，可以在一个Grid布局的某个单元格内使用Flexbox来优化内容的排列。

110、客户端渲染和服务器端渲染的区别

客户端渲染（Client-Side Rendering, CSR）和服务器端渲染（Server-Side Rendering, SSR）是两种不同的网页渲染方式，它们各自有着不同的特点和适用场景。以下是它们的主要区别：

客户端渲染 (CSR)

定义: 在客户端渲染中，当浏览器请求页面时，服务器仅发送HTML文档的结构以及必要的JavaScript文件。页面的内容（如文本、图片等）通常通过AJAX或API调用从服务器获取，并由JavaScript动态地插入到DOM中。

优点:
- 用户体验: 对于已经加载的应用，用户交互响应更快，因为不需要重新加载整个页面。
- 开发效率: 开发者可以利用现代前端框架（如React、Vue.js等）提供的组件化开发模式，提高开发效率。
- 维护性: 单页应用（SPA）模式下，代码组织更加模块化，易于维护。
缺点:
- 首屏加载时间长: 因为需要先下载JavaScript文件，然后执行并获取数据，所以首次访问时页面加载时间较长。
- SEO不利: 搜索引擎爬虫可能无法很好地执行JavaScript，导致难以索引页面内容，影响搜索引擎优化（SEO）效果。

服务器端渲染 (SSR)

定义: 在服务器端渲染中，服务器在接收到请求后生成完整的HTML页面（包括数据），然后将这个完整页面发送给客户端。客户端浏览器直接展示这个已渲染好的页面。

优点:
- 快速首屏加载: 页面首次加载速度快，因为服务器返回的是已经包含了数据的完整HTML页面。
- 有利于SEO: 搜索引擎可以直接抓取完整的HTML内容，有利于提升网站的搜索引擎排名。
缺点:
- 性能开销: 每次请求都需要服务器处理模板渲染，对于高并发的大型网站来说可能会增加服务器负担。
- 复杂度增加: 实现SSR相比CSR更为复杂，尤其是在使用现代前端框架时，需要额外的配置来支持服务端渲染。