- 博客(86)
- 收藏
- 关注
原创 Redux-Saga 深入解析与实战应用指南
Redux-Saga是Redux处理副作用的中间件,采用Generator函数编写异步逻辑,支持数据请求、定时器等场景。其优势在于可测试性强、逻辑清晰,提供take、put、call等API控制异步流程。相比redux-thunk,Saga更适合复杂异步场景但学习曲线较陡。适用于网络请求、WebSocket管理等场景,推荐中大型项目使用。
2025-06-11 03:08:30
463
原创 JavaScript 中数组的常用迭代方法详解
摘要:JavaScript数组迭代方法提供了强大的数据处理功能。主要方法包括:forEach()(遍历)、map()(返回新数组)、filter()(筛选)、reduce()(归约计算)、find()(查找元素)、some()/every()(条件判断)、flatMap()(映射并扁平化)和for...of(遍历)。这些方法各有特点:是否返回新数组、能否中断遍历、是否改变原数组等。合理使用这些方法可以提升代码效率和可读性,文中详细介绍了每个方法的语法和应用示例,并提供了对比表格帮助开发者选择合适的方法。
2025-06-11 03:07:20
428
原创 VS Code 中设置箭头函数快捷键指南
摘要:本文介绍如何在VS Code中设置箭头函数代码片段快捷键。通过配置用户代码片段,添加箭头函数模板(如输入"af"自动生成完整箭头函数结构),并支持异步函数等进阶模板。该方法可显著提升函数编写效率,还可自定义简写形式、默认参数等更多模板选项,打造个性化开发体验。
2025-06-11 03:06:28
350
原创 CSS 中 `position` 与 `transform` 属性详解
CSS 的 position 和 transform 属性是布局与动画的核心。position 控制元素的定位方式(如 relative、absolute 等),决定是否脱离文档流及参照对象;transform 提供 2D/3D 变换(如平移、旋转、缩放),不影响其他元素。两者常结合使用,例如通过 position: absolute 定位元素到父容器中心后,再用 transform: translate(-50%, -50%) 微调实现完美居中。transform 还可叠加多种效果(如 rotate+sc
2025-06-09 18:22:45
424
原创 CSS 中的 `line-height` 属性详解
摘要:CSS line-height 属性用于设置文本行高,影响排版美观性和可读性。其取值包括 normal(默认值)、无单位数字(推荐,如 1.5)、长度值(如 24px)、百分比(如 150%)和 inherit。无单位数字因继承性和响应性最佳成为推荐写法。常见用途包括调整行距和实现单行文本垂直居中。注意事项:行高是整行高度而非行间距,避免使用固定像素值以防响应式问题。推荐优先使用无单位数字取值(如 1.5)。(150字)
2025-06-09 18:21:51
617
原创 CSS 中的 `overflow` 属性详解
CSS的overflow属性用于控制元素内容溢出时的显示方式。主要取值有:visible(默认溢出显示)、hidden(溢出隐藏)、scroll(强制显示滚动条)、auto(自动显示滚动条)和clip(视觉剪裁)。它是复合属性,可通过overflow-x和overflow-y分别设置水平和垂直方向的溢出行为。常见应用包括滚动区域设置、防止布局破坏、制作滚动容器以及实现文本溢出省略号显示。典型案例是当内容超出容器尺寸时自动出现滚动条。
2025-06-09 18:20:52
889
原创 CSS `align-items` 属性详解
align-items是CSS Flexbox布局中控制子项在交叉轴对齐方式的属性。其取值包括:stretch(默认拉伸填满)、flex-start(顶部对齐)、flex-end(底部对齐)、center(垂直居中)和baseline(文本基线对齐)。该属性需设置在父容器上,适用于创建垂直居中布局或统一文本基线等场景。使用时需注意主轴方向的影响,如需单独调整子项对齐可使用align-self。典型应用如垂直居中按钮或多行文字对齐。
2025-06-09 18:19:53
982
原创 CSS 属性详解:justify-content
CSS justify-content 属性详解 justify-content 是 Flexbox 布局的关键属性,用于控制子元素在主轴方向的对齐方式。主要包括以下常用值: flex-start/flex-end:左/右对齐 center:居中对齐 space-between:两端对齐,中间等距 space-around:每个项目两侧等距 space-evenly:完全等距分布 该属性必须配合display:flex使用,适用于导航菜单布局、按钮组对齐等各种需要精确控制元素排列的场景。通过合理选择取值,可
2025-06-06 17:09:22
571
原创 CSS 中的 `box-sizing` 属性详解
box-sizing是CSS控制元素宽高计算方式的属性,决定padding和border是否计入宽高。它有两个主要取值:content-box(默认值,宽高仅含内容区域)和border-box(宽高包含padding和border)。content-box需要手动计算总宽度,而border-box更直观实用,因此开发中常全局设置box-sizing: border-box以避免布局问题。该属性还有inherit值可继承父元素设置。实际项目中推荐使用border-box简化布局计算。
2025-06-06 17:08:38
650
原创 rem 响应式处理详解
本文介绍了rem单位在响应式布局中的应用。rem(root em)基于根元素html的font-size进行计算,通过动态调整html的font-size实现页面元素的自适应缩放。核心实现流程包括:设定基准宽度、编写JS脚本动态设置根字号、元素使用rem单位。文章提供了基础实现代码示例,并分析了rem方案的优点(响应式强、易于维护)和缺点(转换成本高)。同时推荐了postcss-pxtorem等工具可自动将px转为rem。rem方案特别适合移动端响应式开发,能有效适配不同屏幕尺寸。
2025-06-05 15:54:04
537
原创 react-router-dom v5 与 v6 的区别详解
React Router v6相较于v5有多项重大改进:路由配置统一为element属性取代component和render;Switch被Routes替代;嵌套路由更直观;useNavigate替换useHistory;默认精确匹配无需exact;取消render props支持;Navigate代替Redirect;优化TS类型支持;v6.4+新增loader/action数据预处理功能。这些改变使API更简洁一致,功能更强大。
2025-06-05 15:52:39
403
原创 React Router v6 与 v7 的区别详解
React Router 即将迎来v7架构升级,在路由模块化、懒加载和数据处理方面显著提升。v7引入Route Modules架构和Fetcher模式,支持模块级懒加载和更精细的错误边界控制,同时保持与v6基本语法兼容。新项目建议使用稳定版v6,对数据处理要求高的项目可尝试v7。这次升级带来更专业的底层设计,但普通用户无需担心重大语法变更。
2025-06-05 15:51:52
546
原创 responseType 类型详解
摘要:responseType在前端请求中指定响应数据的解析格式,主要用于XHR和axios,而fetch通过.json()等方法处理。常见类型包括text、json、blob、arraybuffer等,分别用于文本、JSON对象、文件下载和二进制数据处理。与Accept头不同,responseType控制客户端解析行为而非服务器响应类型。建议根据需求选择合适类型,如文件下载用blob,JSON数据处理用json。(149字)
2025-06-04 13:35:45
609
原创 Response.prototype 类型详解(Fetch API)
摘要:Response.prototype 是 Fetch API 中 Response 对象的原型,提供了处理 HTTP 响应的属性和方法。核心内容包括: 属性:如 status、headers、body(可读流)、ok(状态码200-299)等,用于获取响应元数据; 方法:包括 json()、text() 等一次性读取响应体的方法,以及 clone() 用于复制响应; 注意:响应体只能读取一次,需用 clone() 处理多重读取需求; 类型:如 cors(跨域响应)、error(网络错误)等,标识响应来
2025-06-04 13:34:34
368
原创 redux-promise 使用详解及其原理剖析
摘要: redux-promise 是 Redux 中间件,支持直接 dispatch 包含 Promise 的 action,自动处理异步结果。安装后通过 applyMiddleware 配置,在 action 中定义 payload 为 Promise(如 axios 请求),中间件会解析 Promise 并重新派发结果。其核心机制是检测 action.payload,若为 Promise 则等待完成后触发新 action。相比 redux-thunk,它更简洁但灵活性较低,适用于简单异步请求(如数据加
2025-05-30 10:22:49
608
原创 Redux-Thunk 使用与实现原理详解
摘要: redux-thunk是Redux的中间件,扩展了dispatch能力,支持异步action(如函数、网络请求)。其核心功能包括异步逻辑处理、多action分发和条件控制。通过applyMiddleware集成,典型用法是返回函数形式的action,内部可调用dispatch和getState。优点在于简单灵活,但复杂场景易导致逻辑分散。与redux-saga等相比,适合中小项目简单异步需求。源码通过拦截函数型action实现功能,还支持依赖注入(withExtraArgument)。适用场景包括数
2025-05-30 10:22:02
638
原创 redux-logger 使用详解与实现原理
本文介绍了Redux日志工具redux-logger的使用方法。主要内容包括:安装方式(npm/yarn),在Redux和Redux Toolkit中的配置方法;日志输出示例展示状态变更过程;实现原理基于Redux中间件机制;可配置参数如折叠显示、耗时统计等;适用场景为开发调试、状态追踪等。最后强调该工具仅推荐用于开发环境,处理大型state时需注意性能影响。全文提供代码示例和配置说明,帮助开发者快速上手使用该调试工具。
2025-05-30 10:21:01
230
原创 Redux 中间件详解
Redux中间件是Redux的扩展机制,用于增强dispatch功能,可在action和reducer之间插入自定义逻辑。它采用链式调用结构(store => next => action),常用于日志记录、异步处理(如redux-thunk、redux-saga)、权限拦截等场景。中间件通过applyMiddleware集成,具有职责单一、可插拔的特点,能灵活控制dispatch生命周期,适用于API请求、错误捕获、状态监控等需求,是提升Redux应用可维护性的重要工具。
2025-05-29 13:57:56
600
原创 Redux 4 到 Redux 5 的兼容性说明与升级建议
Redux 5 是 Redux 演进的重要版本,在保留兼容性的基础上,提升了类型系统和现代构建支持。对于使用 Redux Toolkit 的项目几乎是无缝升级。对于传统 Redux 4 项目,也可以安全迁移,只需注意 action.type 类型和某些弃用项即可。
2025-05-29 13:56:47
329
原创 Redux 5 与 Redux 4 的区别详解
方法仍可使用,但在 Redux 5 中已被标记为弃用,官方推荐使用 Redux Toolkit 提供的。Redux 5 的代码库已完全使用 TypeScript 重写,提供了更强的类型安全性和开发体验。必须是字符串类型,以确保可序列化性和与 Redux DevTools 的兼容性。在升级前,请确保所有依赖库均已兼容 Redux 5,以避免潜在的兼容性问题。Redux 5 明确要求所有的。方法来创建 store。
2025-05-28 12:10:55
406
原创 Redux 是如何实现状态管理的?
本文介绍了Redux的核心工作流程和状态更新机制。主要内容包括:1)通过createStore创建store,维护state和listeners;2)dispatch触发更新流程:reducer处理action返回新state,通知订阅者;3)reducer必须是纯函数,不修改原state;4)通过subscribe实现组件自动更新;5)React中可通过connect或hooks方式绑定Redux。文章强调了不可变数据的重要性,并图解了Redux的数据流。最后总结了Redux通过可预测的纯函数和事件驱动机
2025-05-28 12:08:56
452
原创 什么是 Redux?React 中 Redux 应用详解
Redux是一个可预测的JavaScript状态管理容器,核心在于单一数据源、只读状态和纯函数处理。它通过Store、Action、Reducer和Dispatch实现状态管理,常用于React应用(结合react-redux)。Redux适用于复杂状态管理场景,但存在学习曲线陡峭的问题。Redux Toolkit简化了开发流程,使其在大型项目中仍为主流方案,而小型项目可选择轻量级替代方案(如Context API或Zustand)。总体而言,Redux凭借可预测性、调试能力和成熟生态,仍是企业级应用的重要
2025-05-28 12:08:01
1091
原创 VSCode 中 Prettier 设置 Tab 为 4 个空格指南
打开命令面板:(或 )输入并选择:搜索关键词:找到设置项:设置为:✅ 方法二:通过 全局配置打开用户或工作区的 ,添加以下配置:设置项含义编辑器显示一个 tab 为几个空格是否用空格替代 tabPrettier 中一个 tab 是多少宽度是否使用真实的 (false 表示用空格)✅ 方法三:项目级配置(推荐团队使用)在项目根目录下创建或编辑 文件,添加:✅ 优点:保证所有人 clone 项目后,格式化设置一致。
2025-05-27 08:51:32
869
原创 JavaScript 中常见的 5 种异步场景及 Promise 与 async/await 实现对比
本文展示了5种常见场景下Promise和async/await的异步编程实现对比。包括:1)模拟网络请求;2)顺序读取多个文件;3)并发请求;4)定时器处理;5)错误重试机制。通过代码示例对比发现,async/await在处理顺序依赖、定时操作和错误处理时更清晰直观,而Promise.all适合并发场景。两种方式各有优势,实际开发中常结合使用:async/await简化代码逻辑,Promise提供结构化控制,共同构建高效的异步解决方案。
2025-05-27 08:50:36
327
原创 Promise 详解与应用场景
Promise是ES6引入的异步编程解决方案,用于处理Ajax请求、文件读取等异步操作,避免回调地狱。它具有三种状态(pending/fulfilled/rejected),状态变更不可逆。通过resolve/reject控制流程,支持链式调用(then/catch)。常用API包括Promise.all、Promise.race等,可实现并发请求控制。Promise可与async/await配合使用,使异步代码更简洁。使用时需注意异步执行特性、异常处理和状态不可变性。掌握Promise是现代JavaScr
2025-05-27 08:49:38
1303
原创 URL 参数 vs JSON 请求体 对比指南
摘要: 在前后端开发中,URL 查询参数和 JSON 请求体各有适用场景。URL 参数适合 GET 查询(如筛选数据),易缓存但安全性低;JSON 请求体适合 POST/PUT 操作(如提交表单、修改数据),支持复杂结构且更安全。遵循 REST 规范:查询用 URL 参数,增删改用 JSON 请求体,敏感信息必须通过请求体传输。避免用 GET 携带请求体,并注意 URL 长度限制。合理选择请求方式可提升 API 可维护性和安全性。
2025-05-26 10:18:14
307
原创 函数防抖与截流详解
函数防抖(Debounce)和节流(Throttle)是两种优化高频事件处理的JavaScript技术。防抖是在事件停止触发后延迟执行,适用于搜索联想、表单验证等场景;节流则是固定时间间隔执行一次,常用于滚动监听、窗口resize等。防抖通过清除重置定时器实现,节流则采用时间戳或定时器控制执行频率。两者都能有效避免性能问题和资源浪费,但防抖会丢弃中间事件,节流则保持固定执行节奏。理解这两种技术的区别与应用场景,对前端性能优化至关重要。
2025-05-26 10:17:22
704
原创 JavaScript 中立即执行函数(IIFE)的作用与意义详解
JavaScript中的IIFE(立即执行函数)是一种创建私有作用域的技术,通过将函数定义和调用结合,立即执行函数内部的代码。IIFE的核心价值在于封装私有变量,避免全局污染,支持模块化开发。它通过函数作用域隔离变量,防止命名冲突,适用于工具函数封装、模块模式和初始化代码等场景。虽然ES6模块提供了更现代的解决方案,但IIFE在轻量级脚本和兼容性需求中仍有重要作用,是早期模块化的关键实现方式。
2025-05-26 10:15:36
390
原创 React 常用 UI 组件库对比指南
本文介绍了7款主流React UI组件库及其适用场景:1️⃣ Ant Design(企业后台首选,中国应用广泛)2️⃣ Material UI(国际化项目,Google风格)3️⃣ Chakra UI(轻量项目,开发体验优)4️⃣ Tailwind+Headless UI(高度定制)5️⃣ React Bootstrap(传统项目迁移)6️⃣ Next UI(美观设计,适配Next.js)7️⃣ Mantine(表单/通知功能丰富)。按实际使用率排序为AntD > MUI > Chakra,并给
2025-05-25 10:39:01
1402
原创 DOM 0、1、2 级事件绑定详解
摘要: DOM事件绑定分为0级、1级、2级,主要区别在于标准化、事件捕获和多监听器支持。DOM 0级(element.onclick)非标准且仅支持单监听器;DOM 1级无事件绑定;DOM 2级(addEventListener)为标准方式,支持多监听器和事件捕获/冒泡控制。开发建议统一使用DOM 2级,避免混用,并理解事件流机制以优化调试。 (149字)
2025-05-25 10:38:05
411
原创 React setState 更新机制与任务队列调度详解
React中的setState是异步操作,通过任务队列批量处理状态更新,而不是立即触发视图变化。其触发机制基于事件和优先级调度,如合成事件结束、生命周期函数或任务队列下一轮。多次调用会被合并成一次DOM更新,且日志输出的是旧值。React 18引入了优先级调度器,根据任务紧急程度动态分配执行时机。理解这套机制有助于优化应用性能和代码结构。
2025-05-25 10:36:51
423
原创 宏任务与微任务详解(JavaScript 事件循环核心机制)
JavaScript 事件循环中的宏任务(macro task)和微任务(micro task)是两类异步任务队列。宏任务包括 setTimeout、DOM 事件等,优先级较低;微任务如 Promise.then、queueMicrotask 等,优先级更高。每个宏任务执行完后都会清空微任务队列,因此微任务总在当前宏任务结束后立即执行。通过示例代码可以观察到执行顺序:同步代码 > 微任务 > 宏任务。理解二者的区别对编写异步逻辑和调试时序问题至关重要。
2025-05-25 10:35:56
181
原创 VS Code 格式化文件快捷键与设置指南
本文介绍了VS Code的代码格式化功能,包含快捷键操作(macOS/Windows/Linux)、保存时自动格式化的两种设置方法(全局/项目级),推荐了Prettier和ESLint插件,并提供了格式化命令和常见问题排查建议。内容涵盖格式化相关的主要使用场景和解决方案。
2025-05-24 10:07:11
1168
原创 React 中 Component 与 PureComponent 的区别详解
是Component的优化版本,会在 props 和 state 没有浅层变化时跳过 render,从而提升性能。浅比较是使用===比较每一个prop和state的一级属性是否变化。// 示例// false(引用不同)如果你修改对象内部属性但没有更换引用,检测不到变化。特性Component是否自动优化渲染❌ 无✅ 是比较方式每次都执行 render浅比较 props/state可定制更新策略✅ 自定义 SCU❌ 覆盖后失去优化是否推荐使用一般用在逻辑复杂场景。
2025-05-24 10:06:09
291
原创 React 实际开发中:函数组件 vs 类组件使用场景对比
摘要: 现代React开发推荐优先使用函数组件+Hooks,因其简洁、易复用且覆盖所有生命周期需求。类组件仅限特殊场景,如错误边界处理(componentDidCatch)或历史项目兼容。函数组件适合新项目、UI组合、逻辑复用及副作用管理,而类组件在错误捕获和第三方库依赖时仍有必要。对比显示函数组件在写法、状态管理和学习成本上更优,但类组件保留特定生命周期能力。开发策略建议新项目全面采用函数组件,旧项目按需保留类组件。面试时可强调函数组件的主流地位及类组件的边界用途。 (150字)
2025-05-24 10:05:19
399
原创 为什么 React 中调用 `this.setState()` 会修改视图?
setState()↓标记组件需要更新↓React Fiber 调度执行 render()↓生成新的虚拟 DOM↓diff 新旧虚拟 DOM↓找出变更 → 更新真实 DOM。
2025-05-24 10:04:18
283
原创 JavaScript 中的基于 `call` 的继承
摘要:基于call的继承(构造函数继承)通过在子类中使用Parent.call(this)来继承父类属性。优点是支持传参、避免属性共享、不污染原型;缺点是无法继承父类方法、不支持复用、不是真正的继承。建议结合原型链实现组合继承,既能继承属性又能继承方法。适用于需要独立属性但需兼顾方法继承的场景。(147字)
2025-05-24 10:02:27
352
原创 ES6 Class 与原型(Prototype)详解
原型是 JavaScript 对象继承的核心机制,每个对象都有一个原型对象,属性查找会沿着原型链向上进行。ES6 的 class 语法虽然提供了更直观的面向对象编程方式,但其底层仍然基于原型链。例如,Parent 类的实例 p 的原型指向 Parent.prototype,而 Parent.prototype 包含类中定义的方法。通过原型链,对象可以继承属性和方法,属性查找顺序为实例自身 → 实例的原型 → Object.prototype。理解原型和原型链是掌握 JavaScript 继承机制的关键。
2025-05-23 09:27:29
203
原创 React 项目依赖库说明及 React 19 安装兼容性建议
本文介绍了在 React 19 环境中常见的第三方库及其用途,并提供了适配 React 19 的安装建议。推荐的库包括 prop-types、react-jss、axios、qs、blueimp-md5、echarts、antd、@reduxjs/toolkit、react-router-dom 等,涵盖了类型检查、样式管理、HTTP 请求、状态管理、路由等多个方面。文章还提到 React 19 的新特性,如自动缓存、并发渲染改进、use 函数支持 async/await 等。建议根据项目需求选择必要的依赖
2025-05-23 09:26:42
715
Docker核心技术与实践:容器管理、网络配置及镜像构建
2025-05-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人