自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(107)
  • 收藏
  • 关注

原创 TypeScript 中的剩余参数:灵活处理可变数量参数

在 JavaScript 和 TypeScript 中,剩余参数(Rest Parameters)是一种强大的特性,允许函数接受可变数量的参数,并将它们收集到一个数组中。剩余参数极大地提高了函数的灵活性和可复用性。本文将深入探讨 TypeScript 中剩余参数的概念、用法及其在实际项目中的应用。

2025-05-28 18:53:30 675

原创 TypeScript 索引签名:灵活处理动态属性对象

在 TypeScript 中,当我们需要处理属性名不固定或动态生成的对象时,索引签名(Index Signatures)便成为了我们的得力助手。索引签名允许我们定义对象的键和值的类型,从而在编译时提供类型检查。本文将深入探讨 TypeScript 索引签名的概念、用法及其在实际项目中的应用。

2025-05-28 18:42:31 608

原创 React 泛型组件:用TS来打造灵活的组件。

在 React 开发中,我们常常需要创建可复用的组件。然而,随着项目规模的扩大,组件需要处理的类型也变得多样化。为了在保持组件灵活性的同时确保类型安全,React 结合 TypeScript 的泛型组件成为了一种强大的解决方案。本文将深入探讨 React 泛型组件的概念、用法及其在实际项目中的应用。

2025-05-28 18:34:00 487

原创 TypeScript使用小技巧:灵活的交叉类型。

本文介绍了TypeScript中交叉类型的概念与应用。交叉类型通过&操作符合并多个类型,形成包含所有属性约束的新类型。主要应用场景包括扩展配置对象、组合功能模块和处理第三方类型扩展。文章通过具体代码示例展示了如何利用交叉类型实现类型复用与安全,同时提醒注意属性冲突、只读属性等限制。交叉类型能有效提升代码的健壮性和可维护性,是处理复杂类型系统的有力工具。

2025-05-24 17:27:43 759

原创 TypeScript小技巧使用as const:让类型推断更精准。

TypeScript中的as const是一个强大的类型断言工具,它能够防止类型宽化,保留更精确的类型信息。通过将变量标记为常量,as const可以帮助开发者:1) 保留字面量类型而非泛型;2) 将数组推断为元组类型;3) 使对象属性变为只读。文章通过配置对象和枚举替代方案等实际案例,展示了as const在提升代码类型安全性方面的作用。合理使用这一特性可以有效减少潜在的类型错误,优化TypeScript开发体验。

2025-05-24 17:20:57 1106

原创 前端项目中为啥Redux,Pina存储数据要结合本地存储?

在前端开发中,频繁从本地存储(如 `localStorage` 或 `sessionStorage`)中读取数据确实可能带来性能问题,尤其是当这种操作发生在高频触发的代码路径(如渲染循环、事件处理、定时器等)中时。以下是具体原因和优化建议:

2025-05-23 12:13:57 802

原创 React19 项目开发中antd组件库版本兼容问题解决方案。

在前端开发中,库与框架之间的兼容性问题时常困扰着开发者。最近,我在使用 Ant Design(antd)v5 和 React 19 时,遇到了一个兼容性警告:`Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.`。本文将详细解析这个警告的含义、原因以及解决方案,帮助同样遇到这个问题的开发者快速定位并解决问题。

2025-05-22 18:08:15 1324

原创 React 如何封装一个可复用的 Ant Design 组件

作为一名前端开发工程师,在日常项目中,我们经常会使用 UI 框架(如 Ant Design)来快速搭建界面。然而,直接使用框架组件可能会导致代码重复、样式不统一或功能扩展困难。本文将以封装一个 **可复用的表格组件** 为例,分享如何基于 Ant Design(antd)封装自己的业务组件,提升开发效率和代码质量。

2025-05-22 17:52:23 1041

原创 React中巧妙使用异步组件Suspense优化页面性能。

在 React 应用中,随着功能复杂度的增加,代码体积膨胀和首屏加载缓慢成为常见问题。异步组件技术通过按需加载和代码分割有效解决了这些痛点。本文系统梳理了 React 中实现异步组件的核心方法,包括 React.lazy 和 Suspense 的官方推荐方式,以及路由级代码分割的最佳实践

2025-05-18 20:08:04 497

原创 React 组件之间的通讯是咋玩的?(全面解析)

本文系统梳理了 React 中组件通讯的常见方式及其适用场景。首先,文章强调了组件通讯的必要性,指出在实际开发中,父组件向子组件传递数据、子组件向父组件反馈操作结果、兄弟组件之间共享状态以及跨层级组件共享全局数据等需求都需要打破组件的封闭性。

2025-05-18 19:51:10 279

原创 React 19版本refs也支持清理函数了。

React 19版本引入了ref支持清理函数的功能,使得在ref改变时执行清理操作更加便捷,类似于useEffect的效果。清理函数的主要作用是节约内存,避免内存泄漏。文章通过一个防抖请求接口的案例,对比了useEffect和ref清理函数的写法。useEffect通过依赖项控制清理操作,而ref清理函数则直接在ref回调中处理,无需额外引入useEffect。虽然ref清理函数简化了代码,但useEffect在精确控制依赖性方面更具优势。因此,在实际使用中,应根据具体需求选择合适的方式。

2025-05-18 15:02:56 588

原创 React 19中useContext不需要Provider了。

在 React 19 中,useContext 的使用方式有所更新。开发者现在可以直接使用 <Context> 作为提供者,而不再需要使用 <Context.Provider>。这一变化简化了代码结构,提升了开发效率。

2025-05-18 13:09:54 606

原创 React 19中如何向Vue那样自定义状态和方法暴露给父组件。

在 React 的函数组件中,我们通常通过 props 将数据从父组件传递给子组件,而子组件通过状态(useState)和副作用(useEffect)来管理自身的行为。然而,在某些场景下,我们希望父组件能够直接调用子组件中的某些方法或访问其内部状态。这时,useImperativeHandle 就派上了用场。

2025-05-18 12:33:07 932

原创 React 19 中的useRef得到了进一步加强。

在 React 的世界里,`useRef` 是一个既简单又强大的 Hook,它常常被用于访问 DOM 元素、保存不可变数据或管理组件的生命周期行为。随着 React 19 的发布,`useRef` 的使用场景和最佳实践也得到了进一步强化。本文将结合 React 19 的特性,深入探讨`useRef` 的核心用法、常见误区以及实战技巧。

2025-05-18 11:46:35 690

原创 常见面试题:Webpack的构建流程简单说一下。

在前端工程化中,Webpack 作为模块打包工具的“扛把子”,几乎成为了现代前端项目的标配。但你是否真正了解它的构建流程?为什么它能将零散的代码、样式和资源转化为高效的静态文件?本文将带你深入 Webpack 的构建流程,揭开它背后的技术奥秘。

2025-05-18 09:42:06 857

原创 React中useDeferredValue与useTransition终极对比。

在React的并发模式下,`useDeferredValue`和`useTransition`是两个强大的Hook,它们通过延迟非紧急的UI更新来提升用户体验,特别是在处理复杂渲染或高开销任务时。本文将对比这两个Hook的核心差异,并通过实际案例展示它们的典型应用场景。

2025-05-17 20:38:41 1148

原创 深入解析 React 的 useEffect:从入门到实战

在 React 函数组件中,`useEffect` 是处理副作用(Side Effects)的核心 Hook。无论是数据获取、订阅事件、手动操作 DOM,还是其他异步任务,`useEffect` 都能帮助开发者优雅地管理这些副作用。然而,它的使用场景复杂且容易踩坑。本文将带你从基础到实战,全面掌握 `useEffect` 的核心原理和最佳实践。

2025-05-17 20:12:42 1165

原创 React中useState中更新是同步的还是异步的?

在 React 开发中,`useState` 是最常用的 Hook 之一,它允许函数组件拥有自己的状态,并提供了管理这些状态的便捷方式。理解 `useState` 的更新机制对于编写高效、可维护的 React 应用至关重要。本文将深入探讨 `useState` 的更新机制,包括其工作原理、更新频率、异步行为以及最佳实践。

2025-05-17 19:40:18 1159

原创 React 中事件传参为啥必须写成函数形式?

作为前端开发工程师,我们在 React 中绑定事件时经常会遇到需要传递参数的情况。React 要求我们在这种情况下必须将事件处理程序写成函数形式(而不是直接调用函数),这可能会让一些初学者感到困惑。本文将深入探讨这一限制的原因,并解释其背后的技术原理。

2025-05-17 19:20:33 811

原创 React Hooks 必须在组件最顶层调用的原因解析

React Hooks 必须在函数组件的最顶层调用,这是为了确保 Hooks 的调用顺序在不同渲染之间保持一致。React 内部通过维护一个 Hook 的链表来管理组件状态,如果 Hooks 在条件语句或循环中调用,可能会导致调用顺序变化,进而引发状态不一致、难以调试的错误和组件行为不稳定等问题。正确使用 Hooks 的关键在于始终在最顶层调用它们,避免在条件语句或循环中使用,并在需要时通过自定义 Hook 封装逻辑。遵循这些规则有助于确保 React 组件的行为在不同渲染之间保持一致,并避免潜在的错误。

2025-05-17 19:01:15 821

原创 React Fiber 架构深度解析:时间切片与性能优化的核心引擎

在 React 生态中,性能优化始终是开发者关注的焦点。React 16 引入的 Fiber 架构,通过时间切片(Time Slicing)技术,彻底改变了 React 的渲染机制,为复杂应用的流畅运行提供了有力保障。本文将深入探讨 React Fiber 架构的核心概念,特别是时间切片技术,并通过手写 Fiber 节点结构来加深理解。

2025-05-17 18:56:33 1171

原创 JS 中 Object.keys() 和 Object.values() 的深度解析与应用

在 JavaScript 开发中,操作对象(Object)是日常任务之一。`Object.keys()` 和 `Object.values()` 是两个常用的内置方法,用于获取对象的键或值。虽然它们看起来简单,但在实际开发中有许多值得探讨的细节和应用场景。本文将深入解析这两个方法,并结合实际案例展示它们的用法。

2025-05-14 18:35:59 860

原创 二次封装 Element Plus 的 el-table:提升开发效率与代码复用性

在前端开发中,Element Plus 的 el-table 组件虽然功能丰富,但在实际项目中直接使用可能导致代码重复、维护成本高和业务逻辑耦合等问题。为了解决这些问题,可以通过二次封装 el-table 来提升开发效率和降低维护成本。封装的目标包括统一配置、简化 API、增强扩展性和内置状态管理。具体实现步骤包括创建一个基础表格组件 BaseTable.vue,封装 el-table 的核心功能,设计合理的 Props 和事件,支持自定义列和插槽,并暴露必要的方法供父组件调用。

2025-05-14 18:27:33 804

原创 二次封装 el-dialog 组件:打造更灵活的对话框解决方案

在 Vue 项目中,Element UI 的 `el-dialog` 是一个非常实用的对话框组件。但在实际开发中,我们经常会遇到需要重复设置对话框属性、处理相同逻辑的情况。通过二次封装,我们可以创建一个更灵活、更易用的对话框组件,提高开发效率并保持代码一致性。

2025-05-13 18:53:23 730

原创 深入理解 JavaScript 中的 FileReader API:从理论到实践

在现代 Web 开发中,处理用户上传的文件是一个常见的需求。无论是图片预览、文档解析还是数据导入,都离不开对文件内容的读取和操作。JavaScript 的 `FileReader` API 正是为解决这类问题而生的工具。本文将详细介绍 `FileReader` 的核心功能、使用场景,并通过实际案例展示其强大之处。

2025-05-11 20:19:22 516

原创 Vue3简易版购物车的实现。

本文展示了一个使用Vue 3和TypeScript编写的简单商品管理系统。代码包括一个表格,用户可以新增、修改和删除商品,并实时计算商品总价。通过v-model实现双向数据绑定,computed属性用于搜索过滤和总价计算。用户可以输入商品编号、名称、价格和数量来新增商品,或通过点击按钮修改现有商品信息。删除功能通过splice方法实现。整体代码简洁明了,展示了Vue 3的基本用法。

2025-05-11 10:34:47 193

原创 H5 移动端适配最佳实践落地指南。

在移动端开发中,适配不同设备屏幕尺寸和分辨率一直是一个核心挑战。作为一名前端工程师,我在多个项目中积累了丰富的 H5 移动端适配经验。

2025-05-09 18:39:49 973

原创 Vue3项目中如何实现网页加载进度条。

在网页开发中,加载进度条是一种常见的用户体验优化手段,它可以让用户直观地感知页面的加载状态,减少等待的焦虑感。本文将介绍如何使用 Vue.js 实现一个网页加载进度条,并分享一些优化技巧。

2025-05-09 18:20:27 344

原创 JavaScript 对象引用与值传递的奥秘

作为前端工程师,我经常会遇到一些看似奇怪的行为,尤其是在处理对象和数组时。最近我在项目中遇到了一个有趣的现象,让我对 JavaScript 中的引用和值传递有了更深刻的理解。

2025-05-06 18:30:59 407

原创 网址无法正常打开,居然跟DNS解析有关,咋解决?

当遇到特定网址无法正常打开,而其他网站可以正常访问时,通常可以从本地配置、网络环境、网站服务端等多个维度进行排查和解决。以下是详细的解决步骤和分析。

2025-05-05 12:19:45 972

原创 Vue3 中封装函数实现加载图片&加载失败兜底方案。

通过本文的代码示例,我们实现了在 Vue3 中动态加载图片并处理加载失败的情况。这种方法简单易用,能够很好地满足实际开发中的需求。同时,通过结合 Vue3 的组合式 API,代码更加清晰和模块化。

2025-04-17 13:01:50 605

原创 Vue3中发送请求时,如何解决重复请求发送问题?

在开发过程中,重复请求发送问题可能会导致数据不一致、服务器压力增加或用户操作异常。以下是解决重复请求问题的常见方法和最佳实践:

2025-04-17 12:27:21 244

原创 Vue3中封装组件如何暴露方法给其他组件使用?

在二次封装组件时,如果你需要暴露子组件的方法给父组件使用,可以通过以下方式实现

2025-04-17 10:57:20 375

原创 Node做BFF中间层架构优化前端开发体验并提升系统整体性能。

在使用 Node.js 构建 BFF(Backend for Frontend)层架构时,核心思想是为前端应用(如 Web、移动端或桌面应用)提供定制化的 API 接口,将后端复杂的服务逻辑抽象化、聚合化,从而优化前端开发体验并提升系统整体性能。

2025-04-17 09:58:15 1157

原创 docker部署mysql后,客户端连接不上解决方案。

解决docker部署mysql容器成功后,navica连接不上,虚拟机无法正常Ping通。

2025-04-13 11:13:58 599

原创 让你方便快捷实现主题色切换(useCssVar)

使用 CSS 变量(CSS Custom Properties)实现主题色切换是一种高效且易于维护的方法。通过将主题颜色定义为 CSS 变量,你可以轻松地在不同主题之间切换,而无需修改多个 CSS 规则。

2025-04-12 19:07:20 336

原创 Vue3内置组件Teleport

在 Vue 3 中,<Teleport> 是一个内置组件,用于将模板的一部分内容渲染到 DOM 中的其他位置,而不是当前组件的默认挂载点。这对于实现模态框、通知、工具提示等需要脱离父组件层级进行渲染的场景非常有用。

2025-04-12 17:09:39 394

原创 Webpack压缩css/js代码减少包的体积大小

在使用 Webpack 构建前端项目时,压缩 CSS 和 JavaScript 代码是优化性能、减少包体积的重要步骤。以下是实现这一目标的详细方法。

2025-04-05 15:03:19 236

原创 Webpack代码分包常见策略-优化用户体验

在 Webpack 中,代码分包(Code Splitting)是一种优化技术,用于将代码分割成多个独立的包(chunk),以便按需加载,减少初始加载时间,提高性能。以下是 Webpack 代码分包的常见实现方式和策略:

2025-04-05 12:46:26 352

原创 Webpack中loader的作用。

Webpack中各种loader的作用。比如css-loader,less-loader,style-loader,vue-loader等等

2025-04-04 18:25:20 468

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除