hxjhnct-优快云博客

原创前端保存数据的几种方式

生命周期：可设置过期时间，否则关闭浏览器后失效（会话Cookie）生命周期：仅在当前标签页有效，关闭标签页后删除。存储大小：约5MB（不同浏览器可能不同）仅在客户端存储，不随HTTP请求发送。用途：长期存储数据，如用户偏好设置。生命周期：永久存储，除非手动删除。用途：临时存储同一标签页的数据。与服务器通信：每次请求都会携带在HTTP头中。存储大小：通常不少于250MB，甚至更大。用途：存储大量结构化数据，适合离线应用。用途：常用于会话管理、用户登录状态等。生命周期：永久存储，除非手动删除。

2026-01-05 10:05:09 169

原创 React 为什么不采用（VUE）绑定数据？

React 的核心理念是将构建 UI 的任务委托给渲染函数，视图的变化通过重新渲染实现，而不是通过数据的双向绑定来管理，降低了复杂度。有助于确保仅在必要时进行更新。React 组件拥有丰富的生命周期方法，让开发者可以在正确的时间点控制组件的行为，避免了许多双向绑定中可能出现的难以追踪的问题。React 的设计强调明确的数据和事件流，组件之间的数据交互更加清晰，从而提高了组件的可复用性。每个组件都有自己的状态，对状态的处理由组件内部控制，减少了由外部数据状态改变引发的意外结果。

2026-01-04 15:00:00 171

原创 TypeScript 中 Type 和 interface 的区别

interface：语义更清晰，更符合 OOP 思维，常用于 Model / API Response / Props。在编译时，interface 和 type 的性能差异可以忽略不计，但 interface 在一些复杂的关系中可能有更好的可读性。在 TypeScript 中，type 和 interface 都用于定义对象类型，它们有很多相似之处，但也有一些区别。Type 可以表示映射类型（如在已存在类型上生成新类型），而 interface 不支持。type：适合复杂类型计算。

2026-01-04 10:40:15 79

原创 React 函数组件的useEffect的讲解

在副作用执行后，有时需要清理，例如取消订阅或清除定时器。如果数组中有状态或属性，只有在这些值发生变化时，useEffect 才会执行。如果传入空数组，useEffect 只会在组件挂载时执行一次（相当于类组件的 componentDidMount）。如果数组为空（[]），副作用只会在组件挂载时执行一次。在依赖项中仅包含变化的状态或属性，避免无谓的副作用执行。如果需要清理，比如取消订阅，可以在返回的函数中处理。默认情况下，useEffect 会在每次渲染后执行。这是在组件渲染后执行的代码。

2026-01-03 15:00:00 247

原创 JavaScript ES5和ES6的继承

子类既可以继承父类的属性，又可以继承父类的方法，并且实例化子类时不会调用两次父类的构造函数。通常用于展开数组或对象，可以用于复制对象的属性，以实现简单的对象合并和基础的继承。可以用来动态设置一个对象的原型（即修改对象的 [[Prototype]]），允许通过方法将一个对象的原型改为另一个对象，可以实现对象之间的原型继承关系。创建一个新对象，并将其原型指向指定的现有对象。将一个对象的原型指向另一个对象来实现继承，子类对象将继承父类对象的属性和方法。创建一个新的对象，将父对象作为新对象的原型，从而实现继承。

2026-01-03 10:50:55 208

原创 JavaScript 数组 map 和 forEach 的区别

forEach通常用于执行副作用（如修改原数组或外部变量），而map则更倾向于纯函数式编程，不修改原数组，而是返回新数组。当需要将数组中的每个元素转换为另一种形式，并得到一个新数组时，使用map。当只是需要遍历数组并执行一些操作（如修改原数组、打印、更新外部变量等），而不需要新数组时，使用forEach。forEach用于对数组的每个元素执行一些操作（如修改原数组、打印等），但不创建新数组。它属于“转换”或“映射”操作。map方法返回一个新的数组，新数组的元素是原数组每个元素调用回调函数处理后的结果。

2026-01-02 17:00:00 134

原创 React 中的常用hook

使用useRef生命Ref，可以保存任何值，最常见的是使用ref保存DOM节点（ref：允许组件持有一些不用于渲染的信息：如DOM节点或timeout，更新ref并不会重新渲染组件）。接收一个函数和一个依赖数组，返回一个记忆化的函数。可以帮助在将一个函数定义传递给一个优化的组件之前缓存它（缓存函数本身）。返回一个记忆化的回调函数，以避免在每次渲染时都创建新的回调。接收一个计算函数和一个依赖数组，返回一个记忆化的值。1. useState：用于在函数组件中添加状态，返回一个状态变量和一个更新该状态的函数。

2026-01-02 12:55:25 299

原创 WebView加载白屏，如何优化

懒加载：只在需要时加载图片和其他资源（如大型脚本），使用 Intersection Observer 或 loading 属性实现懒加载。异步加载 JavaScript：使用 async 或 defer 属性来异步加载 JavaScript 文件，以避免阻塞页面的渲染。压缩资源：确保 HTML、CSS 和 JavaScript 文件经过压缩，减小文件体积，加快加载速度。使用 CDN：将静态资源（如图片、样式表和脚本）托管在内容分发网络（CDN）上，以加快加载速度。

2026-01-01 15:00:00 160

原创 k8底层渲染逻辑

向 API Server 提交的对象（如 Pod、Service、Deployment 等）会被存储在 etcd 中，确保数据的一致性和持久性。状态更新：Kubelet 不断地向 API Server 更新 Pod 和容器的状态，以确保集群状态的一致性。控制平面和数据平面：Kubernetes 由控制平面（如 API 服务器、调度器等）和数据平面（Node 和 Pod）组成。绑定 Pod 到 Node：一旦调度器选择了 Node，会更新 Pod 的状态，将其与特定 Node 绑定。

2026-01-01 10:31:20 501

原创 Promise 的三种状态详解

既没有完成（fulfilled）也没有被拒绝（rejected）。可以转换为 fulfilled 或 rejected 状态。状态一旦变为 fulfilled，就不可更改。状态一旦变为 rejected，就不可更改。拥有一个不可变的据因（reason）。拥有一个不可变的终值（value）。通过 resolve(value) 转换到此状态。通过 reject(reason) 转换到此状态。创建 Promise 时的初始状态。

2025-12-31 15:00:00 296

原创 JavaScript Promise 的常用API

当所有Promise都已解决（无论是成功还是失败）时，返回的Promise成功，成功值是一个对象数组，每个对象表示对应Promise的结果。为Promise添加成功和失败的回调函数，返回一个新的Promise。当其中任何一个Promise成功时，返回的Promise就成功，成功值是第一个成功的Promise的成功值；当所有Promise都成功时，返回的Promise才成功，成功值是所有Promise成功值的数组；如果有一个失败，则返回的Promise立即失败，失败原因是第一个失败的Promise的原因。

2025-12-31 10:20:44 641

原创如何实现直播零延迟播放

b、使用媒体服务器（如Janus、Medooze、Ant Media Server等）来转发流。使用低延迟编码参数: 如调整编码器的preset为ultrafast，但会影响压缩效率。WebRTC: 适合实时通信，延迟可低至500ms以内，是目前实现低延迟直播的主要技术。c、前端通过RTCPeerConnection接收流，并通过video标签播放。零延迟是不可能的，因为网络传输、编码、解码都需要时间。延迟和流畅性需要权衡，延迟过低可能导致卡顿。如果使用HTTP-FLV，可以使用flv.js库来播放。

2025-12-30 16:00:00 157

原创 CSS中px，em，rem的区别

当嵌套多个元素时，如果每个元素都使用em单位，并且设置了不同的字体大小，那么它们之间的相对计算会逐层复合，可能导致意想不到的效果。在CSS中，px，em，rem都是单位，用于表示长度（如宽度、高度、字体大小等）。如果没有设置，则继承父元素的字体大小，直至根元素。由于是相对于根元素，所以不会受到父元素字体大小的影响，避免了em单位嵌套带来的问题。使用em时，相对于当前元素字体大小，适合组件内部的相对缩放，但需注意嵌套问题。使用rem时，相对于根元素字体大小，适合全局的响应式缩放，易于维护。

2025-12-30 11:25:10 212

原创 Weboket怎么保证数据收到了

WebSocket 连接在断开时会触发相应的事件，客户端和服务器端都可以监听这些事件，并在事件触发时进行重连操作，在客户端，可以监听 close 事件来检测 WebSocket 连接是否断开，并在断开时进行重连操作，一般由客户端进行重连接。类似于确认消息机制，可以在消息中使用 Ack 来确认接收。重发逻辑：如果在一定时间内没有收到确认消息，发送方可以选择重新发送该消息。确认消息：接收方在处理完消息后，向发送方发送一个确认消息。综合以上方法，可以保证在使用Weboket的时候，客户端数据收到数据。

2025-12-29 10:18:39 294

原创 https，WebSocket，tcp的关系

如果是安全的WebSocket（WSS），这个握手请求就是在 HTTPS 连接上发送的（即先建立TCP+TLS，再发送HTTP升级请求）。数据交换阶段：握手完成后，这个连接就不再遵循HTTP的请求-响应规则，而是使用WebSocket帧协议，可以进行全双工、低开销的二进制或文本数据交换，服务器可以随时主动推送消息给客户端。2. 在已建立的 TCP 连接上，进行 TLS/SSL 握手，协商加密密钥，建立起一个安全的加密隧道。3. 在这条安全的TLS隧道里，传输 HTTP 协议的数据（请求和响应）。

2025-12-29 09:46:57 378

原创 JS实现深拷贝的几种方法

在JavaScript中，深拷贝（deep clone）指的是创建一个新对象，这个对象与原始对象完全独立，即修改新对象不会影响原始对象。由于JavaScript中对象是引用类型，直接赋值只是拷贝了引用，所以需要深拷贝。缺点：会忽略函数、undefined、symbol，遇到循环引用会报错。缺点：需要引入第三方库，增加依赖，体积较大。缺点：代码复杂，需处理边界情况。

2025-12-28 20:15:00 191

原创 React函数式组件和class组件有什么不同

函数式组件：使用JavaScript函数（或箭头函数）定义，返回JSX。类组件：使用ES6的class定义，继承自React.Component，并包含一个render方法，返回JSX。

2025-12-28 16:02:08 377

原创 React 添加主题切换示例

2. 工具函数，将主题对象转换为 CSS 变量，将驼峰命名法（camelCase）的属性名转换为短横线分隔（kebab-case）的CSS变量格式输出格式：例如 { textColor: '#fff' } 转换为 { '--text-color': '#fff' }3. 使用hook提供便捷的方式在组件中访问主题上下文。4. 使用ThemeProvider包裹App。5. 当点击button的时候会切换不同主题。1. 创建主题颜色接口文件。以上就是配置主题的全部过程。

2025-12-27 13:45:00 202

原创 React 使用i18n国际化语言的示例

当我们点击LanguageButton的时候，会自动切换语言。3. 新建语言json文件。

2025-12-27 09:26:40 117

原创前端判断页面是通过PC端还是移动端访问

【代码】前端判断页面是通过PC端还是移动端访问。

2025-12-26 14:00:00 177

原创 JavaScript数组常用的遍历方式

数组原型上的方法，对每个元素执行回调函数，不能break或continue，可以使用return跳过当前回调（相当于continue），但无法跳出整个循环。for...in会遍历所有可枚举属性，包括数组的索引和自定义属性，原型链上的属性（如果数组原型被修改），并且遍历顺序不一定是数字顺序。遍历数组并返回一个新数组，新数组由原数组每个元素经过回调函数处理得到。返回新数组，不改变原数组，用于数据转换。只能获取值，不能获取索引，不支持倒序，遍历元素值，不能直接遍历索引。可以倒序循环，性能最优。

2025-12-26 09:42:48 174

原创 ES6的变化

Object.assign()、Object.is()、Object.setPrototypeOf()、Object.getPrototypeOf()等。Array.from()、Array.of()、数组实例的copyWithin()、fill()、entries()、keys()、values()等。如字符串的includes()、startsWith()、endsWith()，数组的find()、findIndex()、includes()等。新的原始数据类型，用于创建唯一的标识符。

2025-12-25 16:00:00 324

原创 JavaScript的垃圾回收机制

现代 JavaScript 引擎主要采用标记清除算法，从根对象出发，标记所有可达对象，不可达对象会被回收，因此可以正确处理循环引用问题。引用计数通过记录对象被引用的次数来决定是否回收，但无法处理循环引用，因此已基本被淘汰。标记阶段：从根对象（全局对象、当前函数调用栈等）出发，标记所有可达对象。4.分块处理大数据：将大数据处理分解为小块，避免长时间占用内存。将标记过程分解为小步骤，避免长时间阻塞主线程。3. 优化数据结构：使用适当的数据结构，避免不必要的对象创建。清除阶段：遍历堆内存，回收未被标记的对象。

2025-12-25 11:49:08 332

原创 React TypeScript配置eslint和prettier

作用：将Prettier作为ESLint规则来运行，这样在使用ESLint检查时就能同时应用Prettier的格式化规则。用途：将TypeScript代码转换为ESLint可以理解的抽象语法树（AST），以便进行检查。作用：提供React Hooks的ESLint规则，确保Hooks的正确使用。作用：提供React特定的ESLint规则，帮助编写更好的React代码。作用：代码检查工具，用于识别和报告代码中的问题，保持代码质量。作用：代码格式化工具，自动格式化代码，保持代码风格统一。

2025-12-24 14:00:00 736

原创在现有 React 项目中添加 TypeScript

运行 npm start 或 yarn start，Create React App 会自动创建 tsconfig.json 文件。使用npx create-react-app xxx（项目名称）脚手架创建的React项目，不包含TypeScript，在后面的使用中添加TypeScript支持。解决：在 src 目录下创建一个名为 custom.d.ts 的文件（或者 images.d.ts，名字可以自定义，但必须是 .d.ts 结尾）。将 src 目录下的 App.js 改为 App.tsx，等。

2025-12-24 09:55:33 221

原创 React 高阶组件

高阶组件（Higher-Order Component，简称 HOC）是 React 中一种用于增强组件功能的设计模式。HOC 本质上是一个函数，它接受一个组件作为参数并返回一个新的组件。

2025-12-23 10:02:38 162

原创 React Props为什么不可变？

无论何时渲染，子组件都将基于最新的 props 显示内容，而不会因为意外的修改而引入不一致的状态。通过比较前后 props 的引用，React 可以更高效地决定组件是否需要重新渲染，减少不必要的更新。React 采用单向数据流的架构，props 是从父组件传递给子组件的数据。父组件控制着子组件的 props，确保数据流动的可预测性。子组件不会修改传入的 props，从而确保组件的内部逻辑独立且可重用。由于 props 是不可变的，如果组件需要其内部状态进行更新，就必须使用 state 进行管理。

2025-12-23 09:48:07 119

原创 JavaScript如何判断数据类型

判断数据类型是开发中常用的操作，以下让我们来了解JavaScript中判断数据类型的6种方法及使用场景。

2025-12-22 14:00:00 329

原创 https状态码讲解

-405 Method Not Allowed：请求方法不被允许，方法与资源不匹配（如对只支持 GET 方法的资源使用 POST）。--302 Found：请求的资源临时被重定向到新的 URL，客户端在之后的请求中仍应使用原始 URL。--501 Not Implemented：服务器不支持请求中所用的功能，或服务器未实现请求的功能。--204 No Content：请求成功，但没有返回任何内容（例如，DELETE 请求）。--202 Accepted：请求已接受，但尚未处理，通常用于异步任务的处理。

2025-12-22 09:49:30 399

原创 http协议中，从用户在搜索框输入URL地址到页面显示的中间过程

2》浏览器先查看浏览器缓存——>系统缓存——>路由器缓存，如果缓存中有，会直接在屏幕上显示内容，若没有，跳到第三步骤。11》将DOM和CSSOM合并，生成渲染树（Render-Tree）。10》解析HTML，生成DOM树；5》握手成功后，浏览器向服务器发送http请求，请求数据包。9》生成DOM树，解析CSS样式，JS交互，渲染显示页面。12》计算渲染树的布局Layout，将布局渲染到屏幕上。8》读取页面内容，浏览器渲染，解析HTML源码。6》服务器处理收到的请求，将数据返回到浏览器。

2025-12-21 14:00:00 144

原创 https的缓存策略

用于标识特定版本的资源，服务器在响应中提供 ETag 头，客户端下次发起请求时，会附带 If-None-Match 头，携带 ETag 的值以进行验证。max-age: 指定缓存的最大有效时间（秒），例如 max-age=3600 表示资源在 1 小时内有效。通过 ETag 和 Last-Modified 实现客户端与服务器之间的验证，服务器根据请求决定是否使用缓存的版本。确保客户端使用缓存资源的同时，能够验证服务器上资源是否已更新，从而获得最新数据版本。，客户端使用缓存的版本。

2025-12-21 09:11:02 284

原创什么是节流？

在第一次触发事件时，立即执行函数。当事件被触发时，如果距离上次事件触发已经超过了设定的时间间隔，执行相关操作并记录时间；1. 提高性能: 在高频事件（如滚动或窗口调整）中，若每次触发都执行复杂的计算或 DOM 操作，可能会导致性能问题。2. 防止重复调用/避免冗余请求: 对于需要发起网络请求的操作（如 API 调用），使用节流可以防止在短时间内多次请求，降低服务器的负担，提升网络效率。3. 改善用户体验/流畅的界面: 节流确保UI响应稳定，防止在快速滚动或移动时导致页面卡顿或延迟，提供更流畅的交互体验。

2025-12-20 13:30:00 136

HXJ的博客