偷光-CSDN博客

虚拟滚动列表，虚拟滚动的关键在于只渲染当前视口内可见的数据项，而不是一次性渲染所有数据项。这可以显著提高性能，尤其是在处理大量数据时。container.addEventListener("scroll", throttledHandleScroll);window.addEventListener("beforeunload", () => { container.removeEventListener("scroll", throttledHandleScroll);});

2024-10-21 18:58:43 671

原创面试题：被问的几率最大的前端面试题！！

CSS 选择器的优先级是如何计算的？CSS 如何清除浮动？什么是 JSON？它与 XML 有何不同？解释一下什么是 BOM 和 DOM？JavaScript 中 var, let, const 的区别是什么？CSS 有哪些盒模型？它们之间的区别是什么？解释一下什么是 HTML

2024-10-19 12:28:09 632

原创浏览器底层中是如何解析CSS选择器的？

从右向左的匹配规则, 只有第一次会遍历所有元素找节点, 而剩下的就是在看父辈祖辈是否满足选择器的条件, 匹配效率大大提升!因此，浏览器遵循 “从右往左” 的规则来解析 CSS 选择器！

2024-10-05 18:12:44 896

原创 React Hooks 的高级用法

useState 回调函数参数详细解读，useEffect清理副作用，如何获取当前鼠标位置，自定义hooks 的高阶用法，useEffect发送请求，useRef 操作DOM 的具体步骤， react 实现跨级组件通讯，useContext的用法, useContext与``的区别

2024-08-21 18:50:19 1582

原创 JS实现：统计字符出现频率/计算文字在文本中的出现次数

统计字符出现频率/计算文字在文本中的出现次数。`reduce()` 它用于将数组的所有元素减少到一个单一的值。这个值可以是任何类型，包括但不限于数字、字符串、对象或数组。

2024-07-13 21:05:13 512

原创 JavaScript 的垃圾回收机制干了什么

所谓垃圾回收, 核心思想就是如何判断内存是否已经不再会被使用了, 如果是, 就视为垃圾, 释放掉。介绍两种常见的浏览器垃圾回收算法: 引用计数和标记清除法

2024-06-30 19:35:13 370

原创 JS对象由浅入深

对象由属性和方法组成,对象本质是无序的数据集合, 操作对象数据无非就是增 /删 /改 /查 .对于多词属性比如中横线分割的属性，点操作就不能用了, 我们可以采取：对象['属性'] 方式，for 遍历对象的问题：对象没有长度length，而且是无序的，所以我们要利用 for in 遍历对象。内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用。Math的使用，随机数生成。数据存储，内存中堆栈空间分配区别？

2024-06-01 12:58:33 1054

原创 HTML 特殊元素：展示PDF、展示JSON 数据

在页面上如何展示PDF 格式的文件、页面处理并展示格式化后的 JSON 数据

2024-03-20 20:43:27 847

原创 React 中引入 CSS 高阶用法

组件式开发选择合适的`css`解决方案尤为重要通常会遵循以下规则：- 可以编写局部css，不会随意污染其他组件内的原生；- 可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；- 支持所有的css特性：伪类、动画、媒体查询等；- 编写起来简洁方便、最好符合一贯的css风格特点

2024-02-25 16:44:52 1383

原创 React 中定时器的用法

在 react 中，要使用定时器，需要先了解它 hooks 的属性,使用 React 的 useState 钩子来管理一个名为 count 的状态变量。这个组件展示了如何使用 setTimeout 与 React 状态一起工作

2024-02-16 15:06:53 879

原创项目中好用的安装包

项目中使用到的安装包

2024-01-28 12:20:49 260

原创 Git 提交前缀规范

Conventional Commits Git 提交规范

2024-01-16 20:45:30 921

原创说说对 React 的理解

React是一个用于构建用户界面的JavaScript库，由Facebook和Instagram开发并维护。它允许开发人员使用组件化的方式构建复杂的用户界面，并提供了一组工具和API，使得开发人员可以轻松地创建可重用、可维护和响应式的用户界面。

2024-01-03 14:23:44 1325

原创安装 DevEco Studio 后不能用本地 Node.js 打开

安装 DevEco Studio 后第一次打开时，不能用本地 Node.js 打开。答：因为本地 Node.js 文件夹名字中有空格。 **Node.js路径只能包含字母、数字、“。”、“_”、“-”、“:”和“V”**

2023-12-10 16:16:35 978

原创鸿蒙前端开发-构建第一个ArkTS应用（Stage模型）

低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。

2023-12-10 16:01:11 952

原创 DevEco Studio 安装完整流程

DevEco Studio 3.1配套支持HarmonyOS 3.1版本及以上的应用及服务开发，提供了代码智能编辑、低代码开发、双向预览等功能，以及轻量构建工具DevEco Hvigor 、本地模拟器

2023-12-10 15:49:08 253

原创 HarmonyOS Developer——鸿蒙【构建第一个JS应用（FA模型）】

HarmonyOS提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供应用UI开发所必需的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等。FA（Feature Ability）模型：HarmonyOS API 7开始支持的模型，已经不再主推。

2023-12-08 21:52:23 791

原创 useState 和 useReducer 的区别及应用场景

如果你在修改某些组件状态时经常出现问题或者想给组件添加更多逻辑时，我们建议你还是使用 reducer。当然，你也不必整个项目都用 reducer，这是可以自由搭配的。你甚至可以在一个组件中同时使用 useState 和 useReducer。

2023-11-12 21:03:47 428

原创以回调函数的形式给useState提供初始参数

如何使useState通过回调函数的形式给useState提供初始参数。

2023-11-05 17:45:25 333

原创 React 生成传递给无障碍属性的唯一 ID

useId 是一个 React Hook，可以生成传递给无障碍属性的唯一 ID。

2023-10-28 18:10:44 564

原创深度解析 - 行内文本溢出的省略样式如何实现？

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号

2023-09-24 14:45:37 100

原创 React 开发一个移动端项目(2)

标志将其添加为开发依赖项，这意味着它只会在开发过程中使用，而不会包含在最终的生产构建中。@5 和 @6 两个版本对组件类型的兼容性和函数组件支持有所改变，在这里使用的是 @5。在 render 中，渲染 Redirect 实现路由重定向。为 Route 组件添加。属性，用来渲染自定义内容。匹配默认路由，进行重定向。在这里修改了路由的导入。和路由的类型声明文件。

2023-09-16 15:45:52 547

原创 Yarn 和 npm 的区别

性能：Yarn 的安装速度和包的下载速度通常比 npm 更快，这是因为 Yarn 使用本地缓存和并行下载等技术来提高性能。总的来说，Yarn 在性能、可靠性和安全性方面都比 npm 更好，但在某些特定情况下，npm 也可能更适合您的需求。功能：Yarn 支持并行安装、离线安装、自动清理缓存等功能，而 npm 则需要通过插件才能实现。可靠性：Yarn 具有更好的包依赖解析算法，可以避免出现 npm 中常见的“依赖地狱”问题。安全性：Yarn 的安全性检查功能更加完善，可以检测并防止安装恶意软件包。

2023-09-09 17:56:37 1145

原创 React 开发一个移动端项目（1）

react移动端项目（1）- react 常用技术栈、如何搭建一个 react 项目、yarn 的基本使用、如何调整目录结构、Gitee/ Git 的基本使用

2023-09-09 17:54:19 1481

原创父组件调用子组件 ref 不生效？组件暴露 ref ？

向你的组件暴露 ref ：父组件调用子组件 ref 不生效？组件暴露 ref ？要暴露 ref 最关键的就是 forwardRef 。自定义 React 组件暴露引用 (ref) , 将 `inputRef` 引用传递给了 `MyInput` 组件，并且在父组件中通过操作引用来控制子组件内部的行为。

2023-09-03 20:59:34 1115

原创操作视频的开始与暂停

操作视频的开始与暂停：通过 useRef 创建的 ref 操作视频的开始与暂停。- **调用 `ref.current.play()` 方法来播放视频；**- **如果视频需要暂停，我们调用 `ref.current.pause()` 方法来暂停视频**。

2023-09-03 20:56:33 1736

原创通过ref 操作dom , 点击按钮后跳转到页面指定图片位置

滚动图片到视图：通过ref 操作dom , 点击按钮后跳转到页面指定图片位置。imgNode.scrollIntoView() 是什么？

2023-09-03 20:53:07 328

原创 React 中的 ref 如何操作 dom节点，使输入框获取焦点

聚焦文字输入框：当用户点击按钮时，`handleClick` 函数会被调用，从而将焦点聚焦到文本输入框上。React 中的 ref 如何操作 dom节点，使输入框获取焦点

2023-09-03 20:48:31 1306

原创 ref 操作 React 定时器

秒表：ref 操作 React 定时器。需要将 interval ID 保存在 ref 中，以便在需要时能够清除计时器。

2023-09-03 20:44:19 932

原创 useRef 定义的 ref 在控制台可以打印但是页面不生效？

点击计时器：`useRef` 返回的值在函数组件中不会自动触发重新渲染，所以控制台可以显示变化而按钮上无法显示 `ref.current`的变化。useRef 定义的 ref 在控制台可以打印但是页面不生效？

2023-09-03 20:42:20 1164

原创在使用定时器时，关闭后重新开启，定时器显示有问题怎么解决

问题：在使用定时器时，关闭后重新开启，定时器显示会很快速的显示解决：在开启当前定时定时器时，关闭上一个定时器

2023-08-27 16:43:56 375

原创在 React 中如何使用定时器

在React中使用定时器通常有两种方式：使用setInterval和setTimeout函数。根据你的具体需求选择适合的定时器函数，并根据组件的生命周期来启动和清除定时器。

2023-08-27 15:45:17 4591

原创微信小程序中如何动态添加 class 属性

如何在微信小程序动态添加 class 属性，如何在微信小程序组件中动态添加 class 属性

2023-08-20 12:09:55 7217

原创 React + TypeScript + antd 常见开发场景

React + TypeScript + antd 的一些常见开发场景，例如: :时间戳转格式、禁用的表单、删除多选表格、文字内容、筛选对象、自封装表格、模态框、步骤条、搜索框、Tree 树、封装axios、CSS滚动样式、Tree、Form、简单 Form、表格、Button、

2023-08-20 11:58:40 952

git 仓库的忽略文件，gitee

空空如也