自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 【useDeferredValue Hook】将某个值的更新延迟,平衡高优先级和低优先级更新

是 React 18 引入的一个 Hook,用于优化渲染性能。它的主要作用是将某个值的更新延迟,以便在繁忙的渲染过程中优先处理更重要的更新。这在处理高优先级更新(如用户输入)和低优先级更新(如渲染大量数据)时非常有用。

2025-01-22 16:45:18 511

原创 【useLayoutEffect Hook】在浏览器完成布局和绘制之前执行副作用

是 React 中的一个 Hook, 类似于useEffect,但有一个关键的区别:它会在所有的 DOM 变更之后同步调用 effect。这意味着它可以读取 DOM 布局并同步重新渲染。如果你需要执行副作用并且这些副作用依赖于 DOM 布局(例如,获取元素的尺寸或位置),你应该使用。

2025-01-22 15:15:10 590

原创 【useEffect Hook】在组件中执行副作用操作

useEffect是 React 中用于处理副作用的 Hook,它允许你在函数组件中执行类似于类组件生命周期方法的操作。通过useEffect,你可以在组件挂载、更新和卸载时执行某些操作。

2025-01-21 17:53:23 957

原创 【useTransition Hook】将某些状态更新标记为“过渡”,优化渲染性能

useTransition 是 React 中用于优化渲染性能的 Hook。它允许你将某些状态更新标记为“过渡”(transition),从而在高优先级更新(如用户输入)发生时,低优先级更新(如数据加载或复杂计算)可以被延迟,以确保高优先级更新能够更快地响应。本文将详细介绍 useTransition 的语法、参数、返回值以及具体用法。

2025-01-21 15:18:24 456

原创 【useReducer Hook】集中式管理组件复杂状态

在 React 中,`useState` 是一个常用的 Hook,用于管理组件的状态。然而,当状态逻辑变得复杂时,`useState` 可能会导致代码难以维护。`useReducer` 是另一个用于管理状态的 Hook,特别适用于状态逻辑较为复杂的情况。本文将通过一个具体的例子——实现一个计数器应用,来详细介绍如何使用 `useReducer`。

2025-01-20 17:55:11 477

原创 【useImperativeHandle Hook】通过子组件暴露相应的属性和方法,实现在父组件中访问子组件的属性和方法

在 React 中,useImperativeHandle 是一个用于自定义暴露给父组件的实例值的 Hook。它允许你更细粒度地控制哪些方法和属性可以通过 ref 暴露给父组件。本文将通过一个具体的例子——实现一个可被父组件控制的输入框组件,来详细介绍如何使用 useImperativeHandle。

2025-01-20 16:25:24 521

原创 【useContext Hook】解决组件树层级较深时props逐级传递问题

在React开发中,状态管理是一个重要的主题。随着应用规模的增长,组件之间的状态传递可能会变得复杂。useContext是React提供的一个Hook,用于在组件树中传递和使用上下文(Context),从而避免通过props层层传递数据。本文将详细介绍useContext的工作原理、使用场景以及如何正确使用它。

2025-01-20 16:13:27 516

原创 【useCallback Hook】在多次渲染中缓存组件中的函数,避免重复创建函数

在React开发中,性能优化是一个重要的主题。随着应用规模的增长,组件的重新渲染可能会变得频繁,从而影响应用的性能。useCallback是React提供的一个Hook,用于返回一个记忆化的回调函数。它可以帮助我们在依赖项没有变化的情况下,避免函数的重新创建,从而减少不必要的子组件重新渲染。本文将详细介绍useCallback的工作原理、使用场景以及如何正确使用它。

2025-01-20 12:01:30 1089

原创 Nuxt3中使用pinia并实现持久化—pinia-plugin-persistedstate/nuxt

在Nuxt3项目中,为了实现Pinia的状态持久化,可以使用pinia-plugin-persistedstate插件。

2025-01-19 02:13:12 440

原创 【useState Hook】详细指南

本文详细介绍了React中的useStateHook,涵盖了其基本用法、工作原理、初始值设置、状态更新机制、使用key重置状态以及避免在state中镜像props的最佳实践。

2025-01-19 01:05:39 806

原创 JS Clipboard API

JSClipboardAPI。

2025-01-17 19:32:11 574

原创 Sass初探:嵌套只是开始,解锁Sass更多功能

Sass初探,嵌套只是开始,解锁Sass更多功能。Sass(SyntacticallyAwesomeStyleSheets)是一种强大的CSS预处理器,它通过引入变量、嵌套、混合宏(mixins)、函数等功能,极大地提升了样式表的可维护性和开发效率。

2025-01-17 19:27:50 1080

原创 掌握 React 高阶组件与高阶函数:构建可复用组件的新境界

通过上述四个步骤——确定声明值、处理层叠冲突、利用继承机制以及应用默认值,浏览器能够有效地计算出每个CSS属性的具体数值,从而确保网页内容以预期的方式展示给用户。掌握这一过程有助于开发者更好地调试和优化网站样式,提升用户体验。

2025-01-17 19:26:45 676

原创 深入解析CSS属性值计算:从声明到渲染的完整流程

通过上述四个步骤——确定声明值、处理层叠冲突、利用继承机制以及应用默认值,浏览器能够有效地计算出每个CSS属性的具体数值,从而确保网页内容以预期的方式展示给用户。掌握这一过程有助于开发者更好地调试和优化网站样式,提升用户体验。

2025-01-17 19:24:51 271

原创 如何在vue中渲染markdown内容?

在现代Web开发中,Markdown作为一种轻量级的标记语言,广泛用于文档编写、内容管理以及富文本编辑器中。markdown-it是一个非常流行的JavaScript库,用于解析和渲染Markdown内容。本文将详细介绍如何在Vue项目中使用markdown-it插件来渲染Markdown内容。

2025-01-17 19:20:56 2018

原创 TypeScript特有运算符和操作符

TypeScript中的这些特有运算符主要用于类型定义和类型检查,帮助开发者编写更安全、更可靠的代码。通过合理使用这些运算符,可以提高代码的可读性和可维护性。keyof:获取对象的所有键。typeof:获取变量的类型。in:检查对象是否包含某个属性。extends:泛型约束。is:类型保护。as和<Type>:类型断言。never:表示永远不会发生的值。readonly:定义只读属性。?:定义可选属性。[]和**:定义数组类型。和:联合类型和交叉类型。!:非空断言。??和?

2025-01-17 18:14:34 737

原创 掌握 TypeScript 的 `Omit` 工具类型:灵活操作对象属性的艺术

Omit的作用:从对象类型中排除指定的属性。常见场景移除敏感信息(如password修改或扩展组件Props。结合其他工具类型实现更复杂的类型操作。注意事项Omit只能直接排除一级属性,处理嵌套属性时需要结合其他方法。通过Omit,你可以更灵活地定义和操作TypeScript类型,使代码更加简洁和类型安全。

2025-01-17 17:49:39 438

原创 掌握 TypeScript 的 `Pick` 工具类型:轻松提取所需属性

在TypeScript开发中,Pick工具类型是一个非常有用的工具,可以帮助我们从现有类型中提取特定的属性,从而创建新的类型。本文将详细介绍Pick工具类型的用法,并通过实际代码示例展示其在项目中的应用。

2025-01-17 17:49:05 232

原创 TypeScript基础

本文详细介绍了TypeScript的基础用法,从安装到各种类型和基本语法,帮助你快速上手TypeScript。

2025-01-17 17:03:44 919

原创 如何使用 useMemo 和 memo 优化 React 应用性能?

useMemo和memo是React中非常强大的工具,能够显著提升应用的性能。合理使用它们可以帮助你避免不必要的计算和渲染,从而让应用更加高效和流畅。希望本文能帮助你更好地理解和使用这两个工具,为你的React应用带来更好的用户体验。

2025-01-17 14:29:10 794

原创 Nuxt3中怎么配置代理?只需三步!已在上线项目实践

在Nuxt3项目中配置代理(Proxy)通常是为了处理开发环境中的跨域请求问题。在本文中,我们通过server的方式来配置代理,解决开发环境中的跨域请求问题.

2025-01-17 10:03:19 292

原创 pnpm add 和 pnpm install 的区别?

pnpm add:用于添加新的依赖项并安装它们,同时更新。:仅用于安装中已列出的依赖项,不会修改。

2025-01-14 17:49:53 482

原创 CSS-通过伪类画弧形背景

在网页设计中,使用独特的背景形状可以显著提升页面的视觉吸引力。本文将介绍如何创建一个带有弧形背景的顶部区域,并解决可能出现的边缘模糊问题。我们将通过一个简单的 HTML 和 CSS 示例来实现这一效果。

2025-01-14 11:49:15 555

原创 如何在VS Code中设置优雅的中英文字体

在日常开发中,代码编辑器的字体设置对提高编码效率和阅读体验至关重要。本文将详细介绍如何在VS Code中设置优雅的中英文字体,使您的开发环境更加舒适。HarmonyOS Sans 是华为推出的一款无衬线字体,适用于多种场景,尤其适合编程环境。是VS Code团队中流行的字体,它支持连笔显示,字体更加立体,能够提升代码的可读性。当然,我个人现在用的是这两种字体(主要是系统的看腻了。设置完成后,重启VS Code以使更改生效。),可以安装个人喜好安装自己喜欢的字体。

2025-01-14 00:18:40 937

原创 告别繁琐:nrm工具全面解读,npm源管理不再迷惑!

TIP]是一个,安装了它,就可以快速地在npm源之间切换。是一个管理工具,我认为和用来管理node包类似。为什么要切换?同理,切换其它的npm源也一样。为什么用它?方便,个人觉得,嘿嘿。

2024-02-15 00:14:04 572

原创 淘宝镜像的https证书过期了,怎么办?切换新源。

2024年1 月 22 日,淘宝原镜像域名(registry.npm.taobao.org)的 HTTPS 证书正式到期。这就导致旧的 npm 淘宝镜像在使用时出错了。到这里就可以正常使用npm命令安装需要的工具了,如安装pnpm。

2024-02-07 22:26:36 7047 2

原创 Typora保姆级使用教程!!!

(一级标题)、 ## (二级标题)、### (三级标题)…易学易用,性能出色,适用场景丰富的 Web 前端框架。vue是一个渐进式的JavaScript框架。*99,如何解决*不显示问题?使用转义字符*,解决*消失的问题。语法:—+回车或者***+回车。在相邻的两个表格之间插入内容。下划线:用一对u标签包裹。斜体:用一对单星号包裹。,所以这种方式有下划线。说明:对文本进行解释说明。

2024-02-07 20:49:17 1199

原创 JS 工具函数,生成随机颜色值和固定长度的字符串

【代码】JS 工具函数,生成随机颜色值和固定长度的字符串。

2023-06-10 21:56:43 215

原创 Vs Code快速生成代码片段

Vs Code集成了emmet插件。输入快捷代码后点击tab键或者在行尾有提示的时候点击回车就可以生成了。

2023-06-10 14:58:09 282

原创 Vs Code 常用插件

Visual Studio Code是由微软公司推出的一款免费、开源的代码编辑器。对于Web前端开发人员,一个强大的编辑器可以使开发变得简单、便捷、高效。VS Code提供了非常丰富的插件功能,根据你的需要,安装对应的插件可以大大提高开发效率。

2023-06-10 14:19:09 5748

原创 vue 使用q vue-qr生成二维码

【代码】vue 使用q vue-qr生成二维码。

2023-06-07 22:42:49 540

原创 npm: save与 --save -dev的区别

-save与 --save -dev的区别

2023-06-07 21:31:57 256

原创 Uniapp在APP端和H5跳转外链

【代码】Uniapp在APP端和H5跳转外链。

2023-05-29 01:55:22 274 1

原创 JS事件循环

3.按照W3C的标准,浏览器实现计时器时,如果嵌套层级超过5层,则会带有4毫秒的最少时间,这样在计时器时间少于4毫秒时有带来了偏差。2.操作系统的计时函数本身就有少量偏差,由于JS的计时器最终调用的是操作系统的函数,也就携带了这些偏差。JS执行首先会先执行完全局JS,然后才会去队列中去按照优先级顺序依次执行其它任务,4.受事件循环的影响,计时器回调只能在主线程空闲时运行,因此又带来了偏差。##面试题: JS中的计时器可以做到精确计时吗?1.计算机硬件没有原子钟,无法做到精确计时。

2023-05-27 20:21:12 56

原创 JS原型图解!

2023-05-27 00:05:08 109 1

原创 JS判断对象中是否存在某个属性有几种方法?各自什么优缺点

此方式的含义是使用Object.keys(obj)可以得到对象中的所有属性并返回一个数组,使用数组的includes方法判断该属性是否存在这个数组当中,但是当使用以下方式给对象添加了一个属性后,此方式就不适用了。此方式一般情况下可行,但是当对象中该属性的值为undefined时,即使对象中有这个属性,该方法也会返回false。总结:综上所述,判断一个对象中是否存在某个属性需要用到关键字in,语法为:对象名 in 属性名。使用关键字in,可以在原型链上找到。

2023-05-26 22:13:14 818 1

原创 VSCode下载很慢?三步解决!!!

前言:VSCode下载慢的问题是因为外网限制网速的原因,需要用淘宝镜像或者跨域下载才能让下载速度起飞。,这是把下载地址改为国内的镜像地址下载,替换后点击回车下载,下载速度就正常了。2.点击下载后浏览器会自动下载,找到浏览器的下载位置处,有点复制下载链接。3.在浏览器新开一个标签页,把刚刚复制好的链接放进去,把地址中的。,找到适合你系统的版本。

2023-05-26 20:55:14 2306 1

原创 uniapp自定义navBar

【代码】uniapp自定义navBar。

2022-08-19 16:16:31 943

原创 Vue-使用vue+elementUi从0到1创建一个后台管理系统

1.对应很多入门前端来说,进入到一个公司一般来说都只是负责项目的某一个模块,很少有机会轮到自己从0到1去搭建一个项目。一般都是项目组长负责创建好项目,对页面的基本结构做好架构,做对应的跨域处理,token管理,路由拦截,API封装,打包优化这些。我们只是简单的调接口,写一些业务性的代码,这不利于我们提高自己的技术。1.在一个空的文件夹中打开终端,运行命令:2.安装elelment ui:3.配置按需引入:4.配置babel.config.js:5.main.js按需引入组件,并注册。

2022-06-25 01:24:31 927

原创 JS-常用工具类- 根据时间戳和格式获取时间字符串

根据时间戳获取指定的时间格式

2022-06-23 11:41:11 317

空空如也

空空如也

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

TA关注的人

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