周淳APP-CSDN博客

原创【状态管理之Redux&Zustand】

本文对比了Redux和Zustand两种React状态管理方案。Redux通过createStore创建store，使用reducer处理状态更新，组件通过useSelector订阅状态，useDispatch派发action。其核心是单向数据流：action→reducer→newState→组件更新。Zustand作为轻量级替代方案，通过create函数创建store，将action和reducer合并为更新方法，组件直接调用无需dispatch。其优势在于零模板代码、无Provider包裹、精准订阅等

2026-03-30 14:38:51 364

原创【React之Hooks原理、组件、状态管理浅谈】

React Hooks 实现原理核心在于链表+闭包结构。Hooks 存储在组件 Fiber 节点的 hooks 数组中，每个 Hook 对象包含 state 和更新队列。useState 通过闭包保存当前 Fiber 引用，在渲染时按调用顺序匹配 Hook，更新时通过队列批量处理。这种机制要求 Hooks 必须在顶层调用，不能放在条件语句中。函数组件相比类组件更轻量，但存在闭包陷阱问题，可通过函数式更新或 useRef 解决。状态管理从 Props Drilling 到 Context API、Redux

2026-03-26 21:13:17 439

原创【React Fiber架构+React18知识点+浏览器原生帧流程和React阶段流程相串】

React Fiber架构通过引入可中断的渲染机制解决了传统同步渲染导致的页面卡顿问题。它将渲染过程拆分为可中断的Render阶段（构建Fiber树、Diff算法）和不可中断的Commit阶段（DOM更新），利用时间切片技术将任务拆分为5ms小片段，在浏览器空闲时执行，保证60fps流畅体验。Fiber节点采用链表结构实现深度优先遍历，支持优先级调度和双缓存机制。React18在此基础上实现了并发渲染、自动批处理等特性，通过useTransition等API优化交互体验，确保高优先级任务（如用户输入）优先执

2026-03-26 15:45:07 597

原创【VDOM，Diff算法，生命周期，并发请求】

本文介绍了React开发中的三个核心概念：1. 防抖与竞态条件处理：通过标志位法和AbortController解决异步请求竞态问题，利用闭包特性保持请求ID不变；2. Virtual DOM与Diff算法：通过轻量级JS对象模拟DOM，采用同层比较、类型比较和列表比较三大策略实现高效更新，强调key的重要性；3. 生命周期管理：对比类组件和Hooks的生命周期实现方式，展示Hooks如何通过useEffect实现更精细的控制。文章通过代码示例演示了WebSocket订阅、并发请求处理等实战场景。

2026-03-25 21:30:45 356

原创【React Hook全家桶】大致过一遍React Hooks

实战案例 1：useDebounce（防抖值）}, delay);// 使用// 只在防抖后的值变化时请求用户输入 →input立刻更新监测到input变化开启 500ms 定时器500ms 内再次输入 → 清除旧定时器，重新计时停手 500ms →才更新变化 → 发送搜索请求只发一次请求，完美避免频繁请求！useDebounce = 让值延迟更新，专门解决输入搜索、频繁请求的防抖问题，是 React 最实用的自定义 Hook 之一。

2026-03-25 17:53:18 513

原创【JS之闭包防抖节流，this指向，原型&原型链，数据类型，深浅拷贝】简单梳理啦！

本文系统梳理了JavaScript核心知识点：1. 闭包原理：由作用域链和垃圾回收机制形成，实现变量持久化和数据私有化，是防抖节流、模块化的基础。2. 防抖节流：利用闭包保存状态，防抖控制最后一次执行，节流控制执行频率，优化高频事件性能。3. 内存管理：分析内存泄漏场景及排查方法，指出闭包本身不会泄漏，需注意全局引用问题。4. this机制：详解四种绑定规则及常见问题，强调箭头函数的特殊性。5. 原型系统：解析原型链继承机制和instanceof原理，说明方法共享的实现方式。6. 异步编程：从EventLo

2026-03-16 17:57:06 393

原创【计算机网络之XSS、CSRF、DDoS原理及防御措施】

本文系统讲解了三种常见网络攻击及防护措施：XSS攻击通过注入恶意脚本执行，需服务端输入验证、输出转义、CSP策略和HttpOnly Cookie综合防护；CSRF攻击利用自动携带Cookie特性伪造请求，需CSRF Token验证、SameSite Cookie和请求来源检查；DDoS攻击通过海量请求耗尽资源，需网络层流量清洗、应用层限流熔断和基础设施扩容。防护核心在于：XSS防代码执行、CSRF防请求伪造、DDoS防资源耗尽，需前后端协同实现纵深防御。

2026-03-13 16:41:37 742

原创【HTTP1、HTTP2、HTTP3】

摘要：HTTP协议从1.1到3的演进过程解决了网络性能瓶颈问题。HTTP/1.1存在队头阻塞、无状态传输、安全性差等缺陷；HTTP/2通过二进制帧、头部压缩和多路复用优化了HTTP层性能，但仍受限于TCP协议；HTTP/3基于QUIC协议重构传输层，采用UDP实现0-RTT连接、真正的多路复用和连接迁移，彻底解决了TCP层队头阻塞问题。三代协议从应用层优化到传输层重构，逐步提升了网络传输效率和安全性。（150字）

2026-03-11 20:49:18 475

原创【对称加密和非对称加密】

本文摘要：对比分析了对称加密AES和非对称加密RSA的核心特点与应用。AES运算速度快，适合大数据加密，但存在密钥分发难题；RSA解决了密钥分发问题，支持数字签名，但速度较慢。实际应用中采用混合加密方案：用RSA安全传输AES会话密钥，后续通信使用AES加密。文章还详细阐述了两种加密算法的安全机制、应用场景及潜在风险，并解答了关于加密安全性的关键问题，强调非对称加密作为网络安全基石的不可替代性。（149字）

2026-03-11 19:11:18 449

原创【计算机网络之HTTP、TCP、UDP、HTTPS、Socket网络连接】

本文系统介绍了网络通信的核心技术，重点分析了HTTP协议及其相关技术栈。首先阐述了TCP/IP四层模型，详细讲解了HTTP的基本概念、工作原理、报文结构和请求方法（GET/POST等）。随后深入对比了TCP与UDP的特性差异，说明TCP适合可靠传输场景，而UDP更适合实时应用。文章还探讨了HTTPS加密机制、粘包问题解决方案，以及四种长连接技术（Ajax轮询、长轮询、iframe和WebSocket）的实现原理与优缺点。最后介绍了Socket底层通信机制，为理解网络通信提供了完整的技术框架。全文通过丰富的技

2026-03-10 22:20:04 1777 1

原创【Cookie，LocalStorage，SessionStorage，Token】

本文系统梳理了Web客户端存储的核心技术及其应用场景。首先详细解析了Cookie、localStorage、sessionStorage三大存储机制的特性差异：Cookie（4KB）主要用于服务器交互和状态保持，localStorage（5MB）适合持久化本地数据，sessionStorage（5MB）则服务于临时会话数据。其次深入探讨了Token验证机制及其存储方式选择，对比了Cookie与Token在身份验证方面的优劣。针对隐私保护需求，文章分析了Cookie埋点跟踪的实现原理，包括第一方跟踪和第三方跟

2026-03-09 21:36:51 479

原创【HTTP之跨域请求以及Cookie携带的限制】

本文系统阐述了浏览器跨域问题的核心机制与解决方案。主要内容包括：1）跨域本质是同源策略限制，保护用户身份凭证安全；2）CORS方案详解，区分简单请求与预检请求的执行流程；3）其他跨域方案如Nginx代理、JSONP、postMessage的适用场景；4）Cookie跨域携带的严格限制条件及安全逻辑。文章指出现代Web开发应优先采用CORS或Nginx代理方案，并强调跨域问题的核心在于浏览器对响应数据的权限控制而非请求发送本身。全文从底层原理到实践方案，为理解和解决跨域问题提供了系统指导。

2026-03-09 17:43:35 843

原创【HTTP之浏览器缓存及渲染】

浏览器缓存机制解析：通过强缓存和协商缓存优化网页性能。浏览器缓存分为内存缓存（快速但临时）和硬盘缓存（持久但稍慢），利用Cache-Control和Expires控制强缓存，ETag和Last-Modified实现协商缓存。内存缓存适合高频访问的小资源，硬盘缓存适合大体积静态文件。合理设置缓存策略可减少HTTP请求，提升加载速度，降低服务器压力。动态资源应使用no-cache确保数据实时性，静态资源适合设置较长有效期。通过理解缓存机制，开发者可有效优化网页性能，改善用户体验。

2026-03-08 21:56:03 590 1

原创【HTTP相关及RESTful】风萧萧兮易水寒之壮士学习不复返

RESTful接口设计核心要点总结：RESTful以资源为中心，强调HTTP方法语义（GET查/POST增/PUT更/DELETE删）和无状态设计，关键规范包括URI小写、多单词用连字符、资源集合用复数。URL是URI的子集，前者包含定位信息。无状态要求每个请求自带完整信息，服务端不存储会话状态，通过Token/JWT认证确保安全。PUT与POST的核心区别在于幂等性，PUT适合更新或客户端指定ID的创建，POST用于服务端生成ID的新增。JSONP作为早期跨域方案存在GET限制、数据量小和安全风险等缺陷，

2026-03-06 21:53:56 606

原创【useEffect】周公刷新我的世界之useEffect

依赖未变时，Render 阶段不会创建新 effect，Commit 阶段因链表中无该 effect 而跳过执行副作用；依赖变化时，Render 阶段创建新 effect 并标记，Commit 阶段先清旧副作用、再执行新副作用，最后更新清理函数缓存；Commit 阶段是必走流程，核心作用是 DOM 更新 + 条件执行副作用（条件：effect 被标记）。

2026-03-06 17:14:32 592

原创【勤劳的小蜜蜂系列】又是一天刷刷力扣简单题~

本文介绍了JavaScript生成器（Generator）的核心概念与应用。首先通过斐波那契数列生成器示例说明了ASI规则的重要性，指出分号缺失会导致代码解析错误。然后解析了嵌套数组遍历生成器的实现要点，强调使用yield*递归委托和严格类型判断。最后讲解了生成器的核心特性：可暂停执行、双向通信能力，并通过示例展示了如何通过next()和send()实现值传递。文章还详细说明了生成器在前端开发中的典型应用场景，包括异步流程控制和大数据惰性处理，并指出了常见的使用误区。

2026-03-04 20:31:51 385

原创【复苏日记系列三】深入理解 JavaScript 作用域与作用域链[特殊字符]

JavaScript作用域分为全局作用域、函数作用域和块级作用域（ES6新增）。全局作用域变量可全局访问但易污染命名空间；函数作用域限制变量在函数内部访问；块级作用域通过let/const实现，解决变量穿透问题。作用域链决定变量查找顺序，从当前作用域向上级查找。var存在变量提升，let/const有暂时性死区。ES6模块作用域可避免全局污染。典型例子是for循环中使用var和let的不同表现，let为每次迭代创建独立作用域，避免共享变量问题。

2026-03-03 15:27:18 676

原创漫无目的从简单开始刷起~

本文总结了JavaScript编程中常见的错误和优化方法。在异步编程方面，重点分析了sleep函数实现中resolve()立即调用的问题，指出应传递函数引用而非执行结果，并建议添加参数校验。对于数组方法（reduce/map/filter），归纳了语法规范、核心逻辑和边界处理要点，包括循环变量声明、数组初始化和空数组处理等常见错误。最后提炼了"异步传引用不执行"、"数组先初始化"等避坑口诀。这些总结既包含基础语法规范，也涉及面试加分项，对提升JavaScript编码质

2026-03-02 22:11:06 1033

原创【复苏日记系列·第二章】腰酸背痛之变量提升和执行上下文对我的打击报复！！！

本文深入解析了JavaScript中的变量提升机制，重点对比了var、let、const三种声明方式的差异。核心要点包括：1）变量提升发生在执行上下文的创建阶段，var会默认赋值为undefined，而let/const仅声明不赋值；2）let/const存在暂时性死区(TDZ)，强制变量必须先声明后使用；3）TDZ是ES6实现块级作用域的关键设计，解决了var的变量提前可用、重复声明等问题。文章还通过代码示例展示了不同声明方式的实际表现差异，并分析了立即执行函数(IIFE)中的变量提升现象。最后探讨了调用

2026-03-02 17:45:15 991

原创【复苏日记系列·第一章】神来之笔JS引擎之奇怪的“执行上下文”！

执行上下文是JavaScript代码运行的环境容器，由JS引擎创建和管理。它包含变量对象、作用域链和this绑定三个核心组件，分为全局、函数和eval三种类型。执行上下文生命周期包括创建阶段（变量提升、作用域链构建）、执行阶段（代码执行）和销毁阶段（内存回收）。调用栈以先进后出的方式管理执行上下文的入栈和出栈。全局执行上下文绑定到window对象，函数执行上下文的活动对象(AO)在创建阶段会优先处理函数声明。执行上下文与浏览器事件循环紧密关联，调用栈清空是触发渲染和异步任务的前提。JS引擎通过栈内存存储执行

2026-03-01 22:38:07 736

原创【SSE,axios,fetch】就继母axios眉目传情SSE一事,干妈fetch竟然大动干戈！

【技术对比摘要】 axios与fetch核心差异：来源：fetch为浏览器原生API，axios为第三方库；数据处理：fetch需手动解析响应（如.json()），错误状态需判断response.ok；axios自动解析数据并处理错误状态；功能：axios支持拦截器、取消请求、超时设置等，fetch需自行实现；兼容性：fetch不支持IE，axios兼容性更佳。 SSE与fetch本质不同： SSE：服务器单向推送协议（仅GET），用于实时数据流（如日志、通知）； fetch：客户端主动请求工具（支

2025-10-07 10:30:00 705 1

原创【响应式处理】小酌片刻：闲聊一下react和vue的响应式数据的实现吧~

React和Vue响应式数据机制对比：React通过useState/useReducer管理状态变化，触发虚拟DOM重渲染；Vue基于数据劫持（Vue2用Object.defineProperty，Vue3用Proxy）自动追踪依赖和更新。React强调显式状态管理，Vue实现隐式响应式更新。两者在组件更新触发方式、性能优化和状态共享方案上存在显著差异，适用于不同开发场景。

2025-10-06 10:15:00 1630

原创【Axios请求问题】【面试】今天很适合axios和abortController谈一些私人问题呢~

文章摘要：本文介绍了Axios请求中断和重试的实现方法。请求中断通过AbortController实现，适用于大文件下载或频繁请求场景；请求重试可通过自定义拦截器或axios-retry插件实现，在网络不稳定时自动重试。后端使用Express模拟延迟响应，前端演示了两种重试方案和中断控制，优化了用户体验和网络资源利用。

2025-10-05 17:56:30 1182

原创【HTML基础】【面试】书接上回，国庆该苟还得苟~

HTML5相较于HTML4在文档结构、语义化标签、多媒体支持、图形绘制、表单功能、本地存储等方面进行了重大改进，简化了语法并增强了Web开发能力。meta标签通过name和content属性设置网页关键词、视口和字符集等。img的srcset属性实现响应式图片，根据屏幕状况选择合适的图片。picture标签为不同设备提供适配图片方案。script标签的defer和async属性可优化加载性能，前者延迟执行，后者异步执行。前端本地存储方式包括localStorage、sessionStorage、Indexe

2025-10-05 11:45:00 969

空空如也

空空如也