- 博客(110)
- 收藏
- 关注
RSS订阅原创 TypeScript 中高级类型 keyof 与 typeof的场景剖析。
TypeScript中的keyof和typeof是提升代码类型安全性的核心操作符。typeof可将运行时值映射为类型，实现类型复用；keyof能提取类型的所有键名生成联合类型。二者结合可用于：1)安全访问对象属性；2)创建映射类型和Pick类型；3)与Record结合定义键值对象。最佳实践建议避免过度使用typeof，并注意keyof在原始类型和联合类型中的限制。这两个操作符是TypeScript类型系统的基石，能显著提升开发效率和代码健壮性。
2025-05-30 15:46:45
228
原创 带你手写React中的useReducer函数。(底层实现)
本文解析React中useReducer的原理与应用，介绍Reducer如何集中管理状态逻辑、提升可预测性，并处理复杂状态。通过代码示例展示Reducer函数结构和useReducer钩子使用方式，重点实现自定义useReducer：利用useState存储状态，通过dispatch触发更新。文章还结合useContext演示实际应用场景，说明如何通过Reducer模式构建可维护的状态管理方案。
2025-05-30 15:29:37
150
原创 React 项目中封装 Excel 导入导出组件：技术分享与实践
在 React 项目中，处理 Excel 文件的导入和导出是常见的业务需求。无论是导出报表数据供用户下载，还是让用户上传 Excel 文件进行数据解析，一个高效、易用的组件都能极大提升开发效率和用户体验。本文将分享如何在 React 项目中封装一个通用的 Excel 导入导出组件，涵盖核心实现思路、代码示例以及最佳实践。
2025-05-30 12:49:43
87
原创 TypeScript 中的剩余参数：灵活处理可变数量参数
在 JavaScript 和 TypeScript 中，剩余参数（Rest Parameters）是一种强大的特性，允许函数接受可变数量的参数，并将它们收集到一个数组中。剩余参数极大地提高了函数的灵活性和可复用性。本文将深入探讨 TypeScript 中剩余参数的概念、用法及其在实际项目中的应用。
2025-05-28 18:53:30
691
原创 TypeScript 索引签名：灵活处理动态属性对象
在 TypeScript 中，当我们需要处理属性名不固定或动态生成的对象时，索引签名（Index Signatures）便成为了我们的得力助手。索引签名允许我们定义对象的键和值的类型，从而在编译时提供类型检查。本文将深入探讨 TypeScript 索引签名的概念、用法及其在实际项目中的应用。
2025-05-28 18:42:31
763
原创 React 泛型组件:用TS来打造灵活的组件。
在 React 开发中，我们常常需要创建可复用的组件。然而，随着项目规模的扩大，组件需要处理的类型也变得多样化。为了在保持组件灵活性的同时确保类型安全，React 结合 TypeScript 的泛型组件成为了一种强大的解决方案。本文将深入探讨 React 泛型组件的概念、用法及其在实际项目中的应用。
2025-05-28 18:34:00
571
原创 TypeScript使用小技巧:灵活的交叉类型。
本文介绍了TypeScript中交叉类型的概念与应用。交叉类型通过&操作符合并多个类型，形成包含所有属性约束的新类型。主要应用场景包括扩展配置对象、组合功能模块和处理第三方类型扩展。文章通过具体代码示例展示了如何利用交叉类型实现类型复用与安全，同时提醒注意属性冲突、只读属性等限制。交叉类型能有效提升代码的健壮性和可维护性，是处理复杂类型系统的有力工具。
2025-05-24 17:27:43
762
原创 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
1327
原创 React 如何封装一个可复用的 Ant Design 组件
作为一名前端开发工程师，在日常项目中，我们经常会使用 UI 框架（如 Ant Design）来快速搭建界面。然而，直接使用框架组件可能会导致代码重复、样式不统一或功能扩展困难。本文将以封装一个 **可复用的表格组件** 为例，分享如何基于 Ant Design（antd）封装自己的业务组件，提升开发效率和代码质量。
2025-05-22 17:52:23
1061
原创 React中巧妙使用异步组件Suspense优化页面性能。
在 React 应用中，随着功能复杂度的增加，代码体积膨胀和首屏加载缓慢成为常见问题。异步组件技术通过按需加载和代码分割有效解决了这些痛点。本文系统梳理了 React 中实现异步组件的核心方法，包括 React.lazy 和 Suspense 的官方推荐方式，以及路由级代码分割的最佳实践
2025-05-18 20:08:04
498
原创 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
589
原创 React 19中useContext不需要Provider了。
在 React 19 中，useContext 的使用方式有所更新。开发者现在可以直接使用 <Context> 作为提供者，而不再需要使用 <Context.Provider>。这一变化简化了代码结构，提升了开发效率。
2025-05-18 13:09:54
607
原创 React 19中如何向Vue那样自定义状态和方法暴露给父组件。
在 React 的函数组件中，我们通常通过 props 将数据从父组件传递给子组件，而子组件通过状态（useState）和副作用（useEffect）来管理自身的行为。然而，在某些场景下，我们希望父组件能够直接调用子组件中的某些方法或访问其内部状态。这时，useImperativeHandle 就派上了用场。
2025-05-18 12:33:07
933
原创 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
858
原创 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
1168
原创 React中useState中更新是同步的还是异步的?
在 React 开发中，`useState` 是最常用的 Hook 之一，它允许函数组件拥有自己的状态，并提供了管理这些状态的便捷方式。理解 `useState` 的更新机制对于编写高效、可维护的 React 应用至关重要。本文将深入探讨 `useState` 的更新机制，包括其工作原理、更新频率、异步行为以及最佳实践。
2025-05-17 19:40:18
1160
原创 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
823
原创 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
866
原创 二次封装 Element Plus 的 el-table：提升开发效率与代码复用性
在前端开发中，Element Plus 的 el-table 组件虽然功能丰富，但在实际项目中直接使用可能导致代码重复、维护成本高和业务逻辑耦合等问题。为了解决这些问题，可以通过二次封装 el-table 来提升开发效率和降低维护成本。封装的目标包括统一配置、简化 API、增强扩展性和内置状态管理。具体实现步骤包括创建一个基础表格组件 BaseTable.vue，封装 el-table 的核心功能，设计合理的 Props 和事件，支持自定义列和插槽，并暴露必要的方法供父组件调用。
2025-05-14 18:27:33
813
原创 二次封装 el-dialog 组件：打造更灵活的对话框解决方案
在 Vue 项目中，Element UI 的 `el-dialog` 是一个非常实用的对话框组件。但在实际开发中，我们经常会遇到需要重复设置对话框属性、处理相同逻辑的情况。通过二次封装，我们可以创建一个更灵活、更易用的对话框组件，提高开发效率并保持代码一致性。
2025-05-13 18:53:23
734
原创 深入理解 JavaScript 中的 FileReader API：从理论到实践
在现代 Web 开发中，处理用户上传的文件是一个常见的需求。无论是图片预览、文档解析还是数据导入，都离不开对文件内容的读取和操作。JavaScript 的 `FileReader` API 正是为解决这类问题而生的工具。本文将详细介绍 `FileReader` 的核心功能、使用场景，并通过实际案例展示其强大之处。
2025-05-11 20:19:22
520
原创 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
981
原创 Vue3项目中如何实现网页加载进度条。
在网页开发中，加载进度条是一种常见的用户体验优化手段，它可以让用户直观地感知页面的加载状态，减少等待的焦虑感。本文将介绍如何使用 Vue.js 实现一个网页加载进度条，并分享一些优化技巧。
2025-05-09 18:20:27
345
原创 JavaScript 对象引用与值传递的奥秘
作为前端工程师，我经常会遇到一些看似奇怪的行为，尤其是在处理对象和数组时。最近我在项目中遇到了一个有趣的现象，让我对 JavaScript 中的引用和值传递有了更深刻的理解。
2025-05-06 18:30:59
409
原创 网址无法正常打开，居然跟DNS解析有关，咋解决？
当遇到特定网址无法正常打开，而其他网站可以正常访问时，通常可以从本地配置、网络环境、网站服务端等多个维度进行排查和解决。以下是详细的解决步骤和分析。
2025-05-05 12:19:45
1037
原创 Vue3 中封装函数实现加载图片&加载失败兜底方案。
通过本文的代码示例，我们实现了在 Vue3 中动态加载图片并处理加载失败的情况。这种方法简单易用，能够很好地满足实际开发中的需求。同时，通过结合 Vue3 的组合式 API，代码更加清晰和模块化。
2025-04-17 13:01:50
606
原创 Vue3中发送请求时，如何解决重复请求发送问题？
在开发过程中，重复请求发送问题可能会导致数据不一致、服务器压力增加或用户操作异常。以下是解决重复请求问题的常见方法和最佳实践：
2025-04-17 12:27:21
244
原创 Node做BFF中间层架构优化前端开发体验并提升系统整体性能。
在使用 Node.js 构建 BFF（Backend for Frontend）层架构时，核心思想是为前端应用（如 Web、移动端或桌面应用）提供定制化的 API 接口，将后端复杂的服务逻辑抽象化、聚合化，从而优化前端开发体验并提升系统整体性能。
2025-04-17 09:58:15
1161
原创 docker部署mysql后，客户端连接不上解决方案。
解决docker部署mysql容器成功后，navica连接不上，虚拟机无法正常Ping通。
2025-04-13 11:13:58
601
原创 让你方便快捷实现主题色切换（useCssVar）
使用 CSS 变量（CSS Custom Properties）实现主题色切换是一种高效且易于维护的方法。通过将主题颜色定义为 CSS 变量，你可以轻松地在不同主题之间切换，而无需修改多个 CSS 规则。
2025-04-12 19:07:20
338
原创 Vue3内置组件Teleport
在 Vue 3 中，<Teleport> 是一个内置组件，用于将模板的一部分内容渲染到 DOM 中的其他位置，而不是当前组件的默认挂载点。这对于实现模态框、通知、工具提示等需要脱离父组件层级进行渲染的场景非常有用。
2025-04-12 17:09:39
395
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人