- 博客(37)
- 收藏
- 关注
RSS订阅原创 【加密算法】
非对称加密（Asymmetric Encryption）使用**公钥（Public Key）**加密，**私钥（Private Key）**解密，或反之。安全性高，但计算速度慢。是保障数据安全的核心技术，用于防止数据在传输过程中被窃听、篡改或伪造。本文将详细介绍常见的加密算法分类、工作原理及其在网络中的应用。，将任意长度数据映射为固定长度哈希值，用于数据完整性校验和数字签名。理解这些加密算法的原理和应用场景，有助于设计更安全的网络系统！进行加密和解密，计算速度快，适合大数据量加密。
2025-05-28 20:28:26
987
原创 【线程与进程区别】
进程和线程是计算机网络中的两种并发执行方式。进程是资源分配的基本单位，拥有独立内存空间，适合CPU密集型任务，但开销较大；线程是进程内的执行单元，共享内存资源，适合I/O密集型任务，开销更小但需处理同步问题。在网络编程中，多线程和协程更常用，而多进程适用于需要强隔离性的场景。选择方案取决于任务类型：CPU密集型用多进程，I/O密集型用多线程或协程，超高并发推荐协程。
2025-05-28 20:26:37
685
原创 【React Fiber 架构详解】
React Fiber 是 React 16 引入的核心协调算法重构，旨在解决传统同步渲染的性能瓶颈，提升用户体验。其核心在于将渲染任务拆解为可中断、优先级可控的增量单元，并通过链表数据结构优化调度流程。Fiber 的革新目标包括异步可中断、增量渲染和优先级调度，确保关键操作快速响应。其核心机制包括 Fiber 节点数据结构、双缓存机制和优先级调度与时间分片。Fiber 的工作流程分为协调阶段、提交阶段和工作循环，通过任务分片和优先级控制减少卡顿，支持并发渲染和错误边界。尽管 Fiber 提升了性能，但也存
2025-05-17 11:09:14
892
原创 【React中虚拟DOM与Diff算法详解】
React中的虚拟DOM（Virtual DOM）是一种轻量级的JavaScript对象树，用于描述真实DOM结构，其主要目标是优化性能和实现跨平台支持。虚拟DOM通过构建、对比和更新三个阶段工作，其中Diff算法用于高效比较新旧虚拟DOM树的差异，并仅更新真实DOM中变化的部分。Diff算法的核心策略包括树对比（Tree Diff）、组件对比（Component Diff）和元素对比（Element Diff），并通过key标识优化列表更新。尽管虚拟DOM在多数场景下提升了性能，但仍存在内存消耗和首次渲染
2025-05-17 10:49:43
1258
原创 【JS中defer与async区别】
在JavaScript中，<script>标签的defer和async属性用于优化脚本加载和执行，避免阻塞页面渲染。defer脚本在HTML解析完成后按顺序执行，适合依赖DOM或有顺序要求的脚本；async脚本加载完成后立即执行，顺序不确定，适合独立脚本。defer保证DOM操作安全，async可能因执行过早导致DOM未就绪。合理选择两者可优化页面性能，defer适用于复杂逻辑，async适用于轻量独立脚本。
2025-05-17 10:46:36
452
原创 【hot100-动态规划-300.最长递增子序列】
力扣300题要求在一个整数数组中找到最长严格递增子序列的长度。通过动态规划方法，可以解决该问题。首先，定义一个数组 dp，其中 dp[i] 表示以 nums[i] 结尾的最长递增子序列的长度，初始值为1。然后，对于每个位置 i，遍历它之前的所有元素 nums[j]，如果 nums[i] > nums[j]，则更新 dp[i] 为 dp[j] + 1 和当前 dp[i] 中的较大值。最终，dp 数组中的最大值即为所求的最长递增子序列的长度。该方法的时间复杂度为 $O(n^2)$，空间复杂度为 $O(n)
2025-05-15 23:49:23
1007
原创 【hot100-动态规划-139.单词拆分】
力扣139题“单词拆分”要求判断字符串 s 是否可以被拆分为字典 wordDict 中的单词，且单词可重复使用。该问题可通过动态规划解决。定义布尔数组 dp，其中 dp[i] 表示字符串前 i 个字符能否被拆分。初始化 dp[0] = true，表示空字符串可被拆分。状态转移方程为：对于每个位置 i，检查所有可能的子串 s[j:i]，若 dp[j] 为 true 且子串在字典中，则 dp[i] = true。最终 dp[s.length] 表示整个字符串是否可被拆分。时间复杂度为 $O(n^2 * m)$，
2025-05-15 23:36:35
712
原创 【JS中数组的各种方法】
JavaScript 提供了多种数组操作方法，主要分为修改原数组和不修改原数组两类。修改原数组的方法包括 push()、unshift()、pop()、shift()、splice()、reverse() 和 sort()，用于添加、删除、替换、反转和排序数组元素。不修改原数组的方法包括 concat()、slice()、indexOf()、lastIndexOf()、includes()、forEach()、map()、filter()、reduce()、reduceRight()、fill()、find
2025-05-15 00:48:58
490
原创 【hot100-动态规划-322.零钱兑换】
力扣第322题“零钱兑换”要求计算凑成给定总金额所需的最少硬币数。使用动态规划方法，定义 dp[i] 为凑成金额 i 所需的最少硬币数。通过遍历所有硬币面额，更新 dp[i] 的值，状态转移方程为 dp[i] = Math.min(dp[i], dp[i - coins[j]] + 1)。最终，若 dp[amount] 不为 Infinity，返回其值，否则返回 -1。时间复杂度为 $O(amount \times n)$，空间复杂度为 $O(amount)$。示例调用展示了代码的正确性。
2025-05-14 01:33:40
668
原创 【hot100-动态规划-279.完全平方数】
力扣第 279 题“完全平方数”要求找到最少数量的完全平方数，使其和为给定的正整数 n。该问题可以通过动态规划解决。定义一个数组 dp，其中 dp[i] 表示和为 i 时所需的最少完全平方数个数。初始化 dp[0] 为 0，其余为无穷大。通过双重循环，外层遍历所有可能的和 i，内层遍历所有小于等于 i 的完全平方数 j * j，并更新 dp[i] 为 dp[i - j * j] + 1 的最小值。最终，dp[n] 即为所求。该算法的时间复杂度为 $O(n \sqrt{n})$，空间复杂度为 $O(n)$。
2025-05-14 01:17:11
681
原创 【hot100-动态规划-198.打家劫舍】
题目描述了一个小偷计划偷窃沿街房屋的问题，每间房屋都有一定金额，但相邻房屋装有防盗系统，不能同时偷窃相邻房屋。给定一个非负整数数组表示每间房屋的金额，要求计算在不触发警报的情况下，一夜内能偷窃到的最高金额。使用动态规划的思想，定义 dp[i] 为前 i 间房屋能偷窃的最高金额。状态转移方程为 dp[i] = Math.max(dp[i - 1], dp[i - 2] + nums[i])，即分别考虑偷或不偷第 i 间房屋的情况。通过初始化 dp[0] 和 dp[1]，并依次计算 dp[i]，最终 dp[nu
2025-05-14 00:56:38
905
原创 【hot100-动态规划-118.杨辉三角】
力扣第 118 题“杨辉三角”要求生成前 numRows 行的杨辉三角。杨辉三角的每一行由上一行相邻两个数字相加得到，边界数字始终为 1。代码通过两层循环实现：外层循环遍历每一行，内层循环计算中间元素的值。时间复杂度为 $O(n^2)$，空间复杂度为 $O(n^2)$，其中 $n$ 为行数。最终返回存储所有行的二维数组。
2025-05-14 00:37:19
590
原创 【hot100-动态规划-70.爬楼梯】
力扣第 70 题“爬楼梯”要求计算爬到 n 阶楼梯的不同方法数，每次可以爬 1 或 2 个台阶。该问题可以通过动态规划解决，定义 dp[i] 为到达第 i 阶的方法数，状态转移方程为 dp[i] = dp[i-1] + dp[i-2]。代码初始化 dp 数组为 [0, 1, 2]，然后通过循环计算从第 3 阶到第 n 阶的方法数，最终返回 dp[n]。该方法的时间复杂度为 $O(n)$，空间复杂度为 $O(n)$。
2025-05-14 00:22:54
633
原创 【React中函数组件和类组件区别】
React 中的函数组件和类组件是两种主要的组件构建方式，它们在语法、状态管理、生命周期、性能等方面存在显著差异。类组件使用 ES6 类语法，通过 this.state 和 this.setState 管理状态，并具有完整的生命周期方法，适合处理复杂逻辑。函数组件则使用函数定义，通过 useState 和 useEffect 等 Hooks 管理状态和副作用，代码更简洁，性能通常更好，适合简单 UI 和逻辑复用。函数组件在 React 16.8 引入 Hooks 后，逐渐成为主流，但类组件在特定场景下仍有其
2025-05-13 14:35:01
1268
原创 【js中数据类型及区别】
JavaScript 数据类型分为基本数据类型和复杂数据类型。基本数据类型包括 Number、String、Boolean、Undefined、Null、Symbol 和 BigInt，它们是不可变的，存储在栈内存中，赋值操作是值复制，比较操作是值比较。复杂数据类型包括 Object、Array、Function 等，它们是可变的，存储在堆内存中，变量保存的是对堆内存中实际数据的引用，赋值操作是引用复制，比较操作是引用比较。理解这些数据类型的区别对于编写高效且健壮的 JavaScript 代码至关重要。
2025-05-13 14:32:03
1076
原创 【详解js中typeof与instance of区别】
typeof 和 instanceof 是 JavaScript 中用于类型检测的两种主要方法，各有其特点和局限性。typeof 是一元运算符，返回基本类型的字符串表示，适用于检测基本数据类型和函数，但对引用类型（如数组、对象）统一返回 "object"，且存在 typeof null 返回 "object" 的历史遗留问题。instanceof 是二元运算符，用于检查对象是否为某构造函数的实例，基于原型链判断，适用于引用类型，但对基本类型无效，且受原型链完整性和跨全
2025-05-12 00:13:07
825
原创 【React中useRef钩子详解】
useRef是React中的重要Hook，用于在函数组件中创建持久化引用，其核心特性包括持久化存储、不触发重新渲染以及支持多种数据类型。与useState相比，useRef适合存储与UI无关的数据，如定时器ID或DOM引用，且直接修改current属性不会导致组件重新渲染。典型应用场景包括访问DOM元素、存储可变数据、缓存先前状态以及跨组件方法调用。高级用法中，useRef可解决闭包问题，并需注意性能优化和类型安全。最佳实践建议避免在渲染期操作ref.current，优先使用useState管理UI状态，仅
2025-05-12 00:09:12
872
原创 【React中useReducer钩子详解】
useReducer 是 React 中用于管理复杂状态逻辑的 Hook，它通过集中式状态更新逻辑替代 useState，特别适用于处理多值关联状态或依赖前序状态更新的场景。其核心概念包括 Reducer 模式（通过 (state, action) => newState 函数管理状态变更）和返回值（当前状态 state 和派发函数 dispatch）。useReducer 的参数包括 reducer（纯函数处理状态变更）、initialState（初始状态值）以及可选的 init 函数（用于惰性初始
2025-05-11 00:36:46
441
原创 【React中详解useLayoutEffect钩子详解】
useLayoutEffect 是 React 中的一个 Hook，用于在浏览器绘制前同步执行副作用操作，适用于需要避免视觉闪烁或直接操作 DOM 的场景。与 useEffect 不同，useLayoutEffect 在 DOM 更新后、绘制前立即触发，确保操作与渲染同步。它常用于 DOM 尺寸测量、强制样式更新等需与渲染周期同步的任务。然而，由于它是同步执行，可能阻塞渲染，因此应避免耗时操作。在服务端渲染时，useLayoutEffect 会触发警告，建议替换为 useEffect 或条件调用。总的来说，
2025-05-11 00:34:02
544
原创 【React中useCallback钩子详解】
useCallback 是 React 中的一个性能优化 Hook，用于缓存函数引用，避免在组件重新渲染时重复创建相同的函数，从而减少不必要的子组件渲染或副作用执行。其核心作用在于函数记忆化，仅在依赖项变化时重新创建函数，否则复用之前的函数引用。useCallback 的基本语法包括一个回调函数和一个依赖项数组，返回值是记忆化的函数引用。其工作原理涉及初始化阶段将函数和依赖项存储到 Fiber 节点的 memoizedState 中，更新阶段比较新旧依赖项以决定是否返回旧函数。使用场景包括传递回调给子组件、
2025-05-11 00:30:12
490
原创 【详解pnpm、npm、yarn区别】
pnpm、npm 和 yarn 是三种主流的 JavaScript 包管理工具，它们在依赖管理、性能和磁盘空间占用等方面有显著差异。npm 采用扁平化依赖树，但存在冗余和幻影依赖问题；yarn 通过并行安装和全局缓存提升速度，但仍会复制依赖到每个项目
2025-05-11 00:27:59
884
原创 【React的useMemo钩子详解】
是 React 提供的一个性能优化 Hook，用于缓存计算结果，避免在每次渲染时都进行重复计算。第一个参数：计算函数，返回需要缓存的值第二个参数：依赖项数组，当依赖项变化时才会重新计算核心机制缓存触发条件：缓存存储方式：2. 稳定引用类型3. 避免子组件不必要渲染与相关 Hook 的区别特性执行时机渲染阶段同步执行浏览器绘制后异步执行渲染阶段同步执行主要用途缓存计算结果处理副作用缓存函数引用返回值返回缓存值无返回值返回缓存函数
2025-05-09 00:39:52
560
原创 【 React 的useEffect钩子详解】
是 React 中最常用的 Hook 之一，它允许你在函数组件中执行副作用操作（side effects）。 是 React 16.8 引入的 Hook，用于在函数组件中处理副作用操作，如：三种主要使用方式无依赖项 - 每次渲染后都执行空依赖数组 - 仅在组件挂载时执行一次带依赖项 - 依赖项变化时执行常见应用场景数据获取事件监听定时器清理机制 可以返回一个清理函数，在以下时机执行：注意事项避免无限循环：当在 中更新状态且该状态是依赖项时，可能导致无限循
2025-05-09 00:37:11
538
原创 【React 的useState钩子详解】
是 React 中最基础且最常用的 Hook 之一，它允许你在函数组件中添加和管理状态。: 状态的初始值，可以是任何 JavaScript 数据类型: 当前的状态值: 用于更新状态的函数工作原理初始化状态：当组件首次渲染时， 会返回初始状态值状态更新：调用 函数会触发组件的重新渲染批处理更新：React 会对多个状态更新进行批处理以提高性能使用示例基础计数器对象状态高级用法函数式更新当新状态依赖于旧状态时，应使用函数式更新：这种方式可以确保基于最新的状态值进行更新如
2025-05-08 10:40:32
566
原创 【JS原型与原型链详解】
原型：对象共享属性和方法的模板。原型链：实现继承的链式查找机制。最佳实践：优先使用class（ES6 语法糖，基于原型）。
2025-05-07 11:03:35
797
原创 【JS中var,let,const区别】
： / ：2. 变量提升： / ：3. 重复声明： / ：4. 修改值：基本类型（如 、）不可修改。引用类型（如 、）可修改属性，但不能重新赋值。三、使用建议优先使用 ：适用于不会重新赋值的变量（如配置、常量）。其次使用 ：适用于需要重新赋值的变量（如循环计数器）。避免使用 ：除非在旧代码或特殊场景（如全局变量）。四、经典问题示例原因： 的 是全局共享的，而 的 是块级作用域，每次循环都是新的
2025-05-07 10:59:42
1038
原创 【CSS中Flex布局详解】
Flex 布局由(父元素)和(子元素)构成:ml-citation{ref=“2,6” data=“citationList”}。通过设置容器属性或启用弹性布局:ml-citation{ref=“2,4” data=“citationList”}。
2025-05-05 23:22:52
339
原创 【css中position属性详解】
属性用于定义元素的定位方式，结合 和 属性控制元素位置。2. (相对定位)特性元素保留原始文档流位置通过 /// 相对于原始位置偏移会创建新的层叠上下文3. (绝对定位)特性元素脱离文档流相对于最近的非 定位祖先元素定位如果没有定位祖先，则相对于 根元素常用组合：父元素 + 子元素 4. (固定定位)特性元素脱离文档流相对于浏览器视口 (viewport) 定位滚动页面时保持固定位置常见应用：固定导航栏、弹窗
2025-05-05 23:17:46
357
原创 【数组拍平】
方法写法简洁度兼容性性能适用场景flat非常高ES10 及以上非常好现代浏览器、Node 环境递归中兼容性好中通用、定制化需求reduce中兼容性好中偏函数式编程场景…循环中兼容性好偏慢学习、趣味实现。
2025-05-04 00:38:03
234
原创 【数组去重】
方法代码简洁度性能（小数据）性能（大数据）支持复杂类型Set高高高按引用比较includes中中低按引用比较Map中高高按引用比较。
2025-05-04 00:26:10
396
原创 【防抖和节流】
防抖指的是：某个操作频繁触发时，只在最后一次触发后过一段时间才真正执行函数。换句话说，如果这个时间段内再次触发，就重新计时。核心思路： 不停清除之前的定时器，只有停下来一段时间才执行。输入框实时搜索：用户输入完成一段时间后再去请求接口，减少请求次数。窗口 ：只在用户停止拖拽窗口一段时间后，重新计算布局。表单验证：输入停止一段时间后再进行校验。使用示例：什么是节流（）节流指的是：某个操作频繁触发时，规定在一个时间段内只执行一次函数，无论这个时间段内触发多少次。核心思路： 每隔固定时间执行一次，期间的多
2025-05-03 00:41:59
174
原创 CSS居中方法总结
然后给子元素加入 left: 50%;然后给子元素加入left: 50%;然后加入left: 0;给父元素的宽度加上width: fit-content;然后给父元素加上margin: auto;然后加入line-height: 200px;然后给父元素加入padding: 20px;然后给子元素加入margin:0 auto;
2024-10-11 19:21:47
473
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人