- 博客(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
原创 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
原创 如何使用 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
原创 Vs Code 常用插件
Visual Studio Code是由微软公司推出的一款免费、开源的代码编辑器。对于Web前端开发人员,一个强大的编辑器可以使开发变得简单、便捷、高效。VS Code提供了非常丰富的插件功能,根据你的需要,安装对应的插件可以大大提高开发效率。
2023-06-10 14:19:09
5748
原创 JS事件循环
3.按照W3C的标准,浏览器实现计时器时,如果嵌套层级超过5层,则会带有4毫秒的最少时间,这样在计时器时间少于4毫秒时有带来了偏差。2.操作系统的计时函数本身就有少量偏差,由于JS的计时器最终调用的是操作系统的函数,也就携带了这些偏差。JS执行首先会先执行完全局JS,然后才会去队列中去按照优先级顺序依次执行其它任务,4.受事件循环的影响,计时器回调只能在主线程空闲时运行,因此又带来了偏差。##面试题: JS中的计时器可以做到精确计时吗?1.计算机硬件没有原子钟,无法做到精确计时。
2023-05-27 20:21:12
56
原创 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
原创 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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人