react课程0-八股集合（bushi）

Last updated on October 17, 2024 pm

本篇来记录一下之前偷懒没认真了解的React基础知识😌🥱😪😴

前端铜九铁十面试必备八股文——JavaScriptintanceof 运算符的实现原理及实现 instanceof运 - 掘金 (juejin.cn)

前端铜九铁十面试必备八股文——浏览器XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使 - 掘金 (juejin.cn)

前端铜九铁十面试必备八股文——网络HTTP 1.1 和 HTTP 2.0 的区别：二进制协议：HTTP1.1的解析是基于 - 掘金 (juejin.cn)

前端铜九铁十面试必备八股文——性能优化图片懒加载原理 图片懒加载也叫延迟加载，只加载当前屏幕的图片，可视区域外的图片不会 - 掘金 (juejin.cn)

前端铜九铁十面试必备八股文——工程化webpack的构建流程1. 初始化参数：从配置文件或者shell语句中读取 - 掘金 (juejin.cn)

2024前端笔试题（vue2/vue3/react）_vue 笔试题-CSDN博客

身为三本的我就是凭借这些前端面试题拿到百度京东offer的，前端面试题及答案_身为三本的我就是凭借这些面试题-CSDN博客

一、default导出和直接export导出的区别

  • export default：用于导出模块中的默认值，每个模块只能有一个默认导出。导入时不需要使用大括号 {}，并且导入时的名称可以任意更改。

  • export（命名导出）：export 允许导出多个值，导入时必须使用与导出的名称相同的名称，并且需要使用大括号 {}。你可以同时导出多个值，也可以导入多个值。可以通过as关键字重命名。

两者可以混用。

二、Data loading waterfalls

“Data loading waterfalls” 是一种可能在前端应用中遇到的性能问题，指的是当多个依赖数据的加载请求按照顺序（串行）进行，而不是并行进行时，导致整体加载时间比实际需要的要长。每个请求依赖上一个请求完成后才能开始，就像“瀑布”一样逐渐下落，这种模式会造成延迟，特别是在请求数据量较大或网络较慢的情况下。

三、promise

四、suspense

五、e.preventDefault();

e.preventDefault() 是 JavaScript 中 Event 对象的方法，用于取消事件的默认行为。它通常用于处理表单提交、链接点击等操作，以便你可以执行自定义逻辑而不是默认的浏览器行为。

六、模板字面量

在 JavaScript 中，``（反引号）用于创建模板字面量（Template Literals），这是一个强大的字符串处理特性。你需要使用反引号来包裹数据时，涉及到字符串插值和多行字符串等情况。

  1. 字符串插值

当你需要在字符串中插入变量或表达式时，可以使用模板字面量。模板字面量允许你将变量或表达式嵌入到字符串中，使用 ${} 语法：

  1. 多行字符串

模板字面量还支持多行字符串，不需要使用反斜杠 \ 来换行：

  1. 表达式插值

除了简单的变量，模板字面量也支持嵌入表达式：

七、order

八、钩子只能在组件内被调用？

九、StrictMode

十、ref

JSX 的优势

尊的觉得jsx代码简直可读性太强了..最完美的代码，高效且优雅。。js用那么多class真的不会重复吗。

  1. 可读性：
    • JSX 语法更接近于 HTML，开发者可以更直观地看到组件的结构。
  2. 组件化：
    • 通过 JSX，组件可以轻松地组合和复用，提高了开发效率。
  3. 状态管理：
    • 与 React 的状态管理结合，能够更简单地处理 UI 更新。
  4. 简化的事件处理：
    • JSX 使得事件处理和属性绑定变得更加简洁。

纯 JavaScript 的挑战

  • DOM 操作繁琐：
    • 使用纯 JavaScript 操作 DOM 可能需要更复杂的代码，特别是涉及动态更新时。
  • 逻辑与结构分离：
    • 结构与逻辑分开可能导致代码可读性下降，不易维护。

PageRouter

无app文件夹，建立pages文件夹，里面的文件自动成为路由，index.js成为根路由；

可嵌套路由：建立相应名称文件夹。index.js同理成为根路由；

可动态路由：建立和App Router语法一样，但是命名在文件上而不是文件夹；

读取动态路由：非params，使用useRouter，router.query.[相应路由]；

_app：管理布局、样式等。类layout文件。

标题：需要下载head组件，和return的内容放在一起。使用title和Link指定。

fetch数据：不可直接在组件内，需要借用getStaticProps获得并返回。（可控SSG），可返回revalidate参数，实现静态增量再生。

动态界面fetch：借用getSeverSideProps，它可以获得params参数，

axios

axios 是一个基于 Promise 的 HTTP 库，它能在浏览器和 Node.js 环境中发送 HTTP 请求。相比于传统的 XMLHttpRequest 和 fetch，axios 提供了更多功能和更简便的用法，例如自动转换 JSON 响应、支持请求/响应拦截器、取消请求、处理超时等。

  • Axios 的特点：
  1. 支持 Promise：支持链式调用，便于处理异步逻辑。
  2. 自动 JSON 数据转换：会自动将请求和响应的数据转换为 JSON 格式。
  3. 请求和响应拦截器：可以在请求或响应被处理之前拦截并进行修改。
  4. 错误处理更简便：自动处理 HTTP 错误状态码，并可以统一管理错误。
  5. 支持取消请求：可以通过 CancelToken 取消正在进行的请求。
  6. 支持超时设置：可以设定请求的超时时间。
  7. 兼容性好：在 Node.js 和浏览器端都可以使用。
  • 为什么使用 Axios 而不是 Fetch？
  1. 兼容性：fetch 不支持自动处理跨域 cookie，axios 可以做到。
  2. 更丰富的功能：axios 提供了拦截器、自动 JSON 解析、取消请求等功能，而这些在 fetch 中需要手动实现。
  3. 错误处理：fetch 只会在网络错误时抛出异常，HTTP 错误状态码不会抛出异常，而 axios 会自动处理状态码异常并抛出错误。

React API

React API 是 React 库中提供的一组接口和工具，用于构建用户界面。通过 React API，你可以创建组件、管理状态、处理事件等。React API 主要包括以下几部分：

  1. React 组件 API
    • React.Component：创建类组件的基类，用于创建有状态组件。
    • React.PureComponent：类似于 React.Component，但会自动实现 shouldComponentUpdate 以避免不必要的重新渲染。
    • React.memo：用于优化函数组件，避免不必要的重新渲染。
  2. Hooks API
    • useState：在函数组件中引入本地状态。
    • useEffect：处理副作用（如数据请求、订阅等）。
    • useContext：在组件树中共享数据而不需要手动传递 props。
    • useReducer：类似于 Redux 中的 reducer，用于管理复杂状态逻辑。
    • useRef：获取组件实例或 DOM 元素的引用。
  3. Render 方法
    • ReactDOM.render：在 React 18 之前，用于将 React 组件渲染到 DOM 中。
    • createRoot：在 React 18 中的渲染入口，用于启用并发渲染。
  4. Context API
    • React.createContext：创建全局状态并在组件树中共享。
    • Context.Provider：提供数据给所有子组件。
    • Context.Consumer：访问提供的数据。
  5. JSX API
    • JSX 是一种语法糖，用来书写 React 元素，它看起来像 HTML，但在底层是 JavaScript 对象。
    • React.createElement：底层方法，用于创建 React 元素，JSX 最终会被编译为对这个函数的调用。
  6. Fragments
    • React.Fragment：用于返回多个元素而不在 DOM 中生成额外的父级容器。
  7. React 事件系统
    • React 提供了跨浏览器的合成事件，如 onClick、onChange、onSubmit 等。

HMR

HMR（Hot Module Replacement，热模块替换）是现代前端开发工具（如 Webpack、Vite 等）提供的一项功能，允许在开发过程中实时更新应用程序中的模块而无需完全刷新页面。它提高了开发效率，减少了等待时间，尤其是在开发复杂的前端应用时。

（1）HMR 的工作原理

HMR 的基本工作原理是检测项目中的文件变化，将更新后的模块注入到运行中的应用程序中，而不是重新加载整个页面。它仅替换发生变化的模块，保持应用程序的状态不变。

以下是 HMR 的工作流程：

  1. 文件监听：开发服务器（如 Vite、Webpack）会监控文件系统中的源代码文件，当检测到某个模块发生变化时，它会生成新的模块包。
  2. 增量更新：服务器只会重新编译发生变化的模块，而不是编译整个应用程序。这大大加快了编译速度。
  3. 模块替换：客户端通过 WebSocket 与服务器进行通信，接收到更新通知时会请求更新的模块，并直接将新的代码块替换掉旧的模块，而不影响其他模块。
  4. 保持状态：因为 HMR 不会完全刷新页面，所以在模块更新的过程中，页面的状态（如用户输入、应用状态等）可以保持不变。

（2）HMR 的优点

  • 快速更新：通过增量编译和模块替换，减少了重新加载页面的等待时间。
  • 保留应用状态：不需要刷新整个页面，避免因为刷新丢失应用的运行状态。
  • 提高开发效率：开发者可以快速验证代码修改效果，尤其在样式调整或交互调试时，效果立即生效。

（3）Vite 中的 HMR

Vite 天然支持 HMR，作为一个基于 ES 模块的开发工具，Vite 提供了极快的热更新体验。默认情况下，Vite 在开发模式下自动开启 HMR，你无需做额外配置。

如果你想在 Vite 中自定义 HMR 行为，可以通过 vite.config.js 中的 server.hmr 选项进行配置，例如：

1
2
3
4
5
6
7
8
9
export default {
  server: {
    hmr: {
      protocol: 'ws', // 可选的协议，WebSocket（ws）或 Secure WebSocket（wss）
      host: 'localhost',
      port: 3000
    }
  }
}

在使用 React 开发时，HMR 也有助于保留组件的状态。现代的 React 框架（如使用 Vite 或 Webpack 配置的 React 项目）通常会结合 react-refresh 来实现 React 的 HMR，确保组件更新时，状态和界面可以同步变化。

Websocket

WebSocket 是一种网络通信协议，提供了全双工（双向）通信渠道，允许客户端与服务器之间进行实时的数据交换。它最初是在 HTML5 规范中定义的，旨在改善 Web 应用程序的实时性能。以下是对 WebSocket 的详细介绍：

1. 基本概念

  • 全双工通信：WebSocket 允许客户端和服务器同时发送和接收消息。与传统的 HTTP 请求/响应模型相比，WebSocket 连接在建立后，可以随时双向通信，减少了延迟。
  • 持久连接：一旦建立 WebSocket 连接，连接会保持打开状态，直到客户端或服务器主动关闭。这减少了反复建立和关闭连接的开销。

2. WebSocket 工作原理

  • 握手过程：
    1. 客户端发起握手：客户端发送一个 HTTP 请求，以升级连接到 WebSocket。该请求包含 Upgrade 和 Connection 头。
    2. 服务器回应：服务器接收到请求后，返回一个 101 状态码，表示协议切换成功，并建立 WebSocket 连接。
  • 数据帧：
    • WebSocket 数据在传输时以帧的形式发送。每个帧可以包含文本、二进制数据、控制帧等。

3. WebSocket 的优点

  • 实时性：WebSocket 可以实现低延迟的实时数据传输，适合实时应用（如聊天应用、在线游戏、股票行情等）。
  • 减少开销：与 HTTP 的请求-响应模型相比，WebSocket 在建立连接后不需要再发送额外的 HTTP 头信息，从而减少了数据传输的开销。
  • 双向通信：客户端和服务器可以随时互相发送消息，提高了交互性。

4. 应用场景

  • 即时通讯：聊天应用、社交网络等需要实时消息推送的场景。
  • 在线游戏：多人在线游戏中，玩家的实时操作需要即时同步。
  • 实时数据推送：股票行情、天气更新等需要频繁更新数据的应用。
  • 物联网（IoT）：设备与服务器之间的实时通信。

5. 使用 WebSocket 的注意事项

  • 兼容性：虽然大多数现代浏览器都支持 WebSocket，但仍需考虑某些旧版浏览器的兼容性。
  • 安全性：WebSocket 协议（wss://）可以通过 TLS 加密连接，确保数据传输的安全性。
  • 管理连接：在高负载情况下，需要合理管理 WebSocket 连接的数量，以避免服务器资源耗尽。
  • 心跳机制：为防止连接超时，需要实现心跳机制，以保持连接的活跃状态。

6.举例说明

客户端发送一个 HTTP 请求，目的是将当前连接升级为 WebSocket 连接。这个请求包含了一些特定的头信息：

1
2
3
4
5
6
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

请求头说明：

  • GET /chat：请求的资源路径，这里假设是一个聊天应用的接口。
  • Host：请求的主机名。
  • Upgrade：指定要升级的协议，这里是 websocket。
  • Connection：表示该连接将要升级。
  • Sec-WebSocket-Key：一个 Base64 编码的随机字符串，用于 WebSocket 连接的安全性。
  • Sec-WebSocket-Version：请求的 WebSocket 版本，这里使用的是版本 13，这是当前的标准版本。

当服务器接收到上述握手请求后，会检查请求的有效性，并返回一个 HTTP 响应。如果一切正常，服务器会返回 101 状态码，表示协议切换成功。

1
2
3
4
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: dGhlIHNhbXBsZSBub25jZQ==

响应头说明：

  • HTTP/1.1 101 Switching Protocols：状态行，表明服务器已成功处理请求并切换协议。
  • Upgrade：指示升级的协议，这里是 websocket。
  • Connection：表示连接已经升级。
  • Sec-WebSocket-Accept：这是服务器返回的一个键值，基于客户端发送的 Sec-WebSocket-Key 生成。服务器通过将客户端的密钥与一个固定字符串拼接，然后进行 SHA-1 哈希处理并 Base64 编码来生成这个值。这是为了确保连接的安全性和合法性。

心跳机制

心跳机制（Heartbeat Mechanism）是一种用于保持网络连接活跃和稳定的技术。它通过定期发送小的数据包（称为心跳包）来检查连接的状态，确保客户端和服务器之间的连接仍然可用。这种机制广泛应用于实时通信、分布式系统、负载均衡和其他网络应用中。

（1）心跳机制的主要作用

  1. 保持连接活跃：
    • 在一些网络环境中，长时间不活动的连接可能会被中间设备（如路由器、负载均衡器等）自动关闭。心跳机制通过定期发送心跳包，可以防止这种情况发生。
  2. 检测连接状态：
    • 通过心跳包，双方可以及时发现连接是否中断。如果心跳包未能按时到达或未能收到响应，系统可以采取相应措施（如重连、切换备用连接等）。
  3. 负载均衡：
    • 在分布式系统中，心跳机制可以帮助负载均衡器确定后端服务器的健康状况。如果某个服务器未能响应心跳请求，可以将其标记为不可用，从而避免将请求发送到该服务器。

（2）心跳机制的工作原理

  1. 发送心跳包：
    • 客户端或服务器定期发送小的心跳包，通常包含连接的标识符和时间戳等信息。
  2. 接收心跳包：
    • 接收方收到心跳包后，可以更新其状态，并可能向发送方返回一个响应，以确认连接仍然有效。
  3. 超时处理：
    • 如果在预定时间内未收到心跳包的响应，系统会假定连接已经中断，并执行重连或其他错误处理机制。

（3）实现示例

以下是一个简单的心跳机制的伪代码示例：

客户端代码：

1
2
3
4
setInterval(() => {
    // 发送心跳包
    socket.send('heartbeat');
}, 5000); // 每 5 秒发送一次心跳包

服务器代码：

1
2
3
4
5
6
socket.on('message', (message) => {
    if (message === 'heartbeat') {
        // 收到心跳包，发送响应
        socket.send('heartbeat response');
    }
});

SDK

SDK 是“Software Development Kit”的缩写，翻译为“软件开发工具包”。SDK 是一组工具、库、文档和示例代码的集合，旨在帮助开发者创建特定平台或应用程序的程序。它通常包括以下内容：

  1. API（应用程序编程接口）：提供与底层服务或平台交互的函数和方法。
  2. 开发库：用于简化特定功能的实现的代码库。
  3. 文档：指导开发者如何使用 SDK 的用户手册和 API 文档。
  4. 示例代码：演示如何使用 SDK 的示例程序，帮助开发者快速上手。
  5. 工具：用于开发、测试和调试的工具。
react课程
#react
react课程0-八股集合（bushi）
http://example.com/2024/09/11/react课程0-八股集合（bushi）/
Author
Yaodeer
Posted on
September 11, 2024
Licensed under