- 博客(126)
- 收藏
- 关注
RSS订阅原创 React 父子之间传值的几种方法！！！
在 React 中，父子组件之间的数据传递是一个常见的需求，总结父传子：通过 `props` 直接传递数据。子传父：通过回调函数作为 props 传递给子组件，子组件调用该回调函数来传递数据。useRef 和 useImperativeHandle：允许父组件直接调用子组件的方法，但需注意封装性问题。- **`useContext`**：适用于深层嵌套的组件树，避免了逐层传递 `props` 的麻烦。每种方法都有其适用场景，选择合
2025-02-16 15:15:56
149
原创 React 性能优化的核心方案
React 性能优化的关键原则：优先定位瓶颈：通过工具分析，避免盲目优化。最小化渲染范围：减少组件树更新的影响范围。合理使用缓存：善用 useMemo、useCallback 和 memo。按需加载资源：减少首屏加载时间，提升用户体验。
2025-02-09 11:10:00
591
原创 深度剖析 React 的 useReducer Hook：从基础到高级用法
在 React 中，useReducer 是一个 Hook，用于管理复杂的状态逻辑。它类似于 Redux 的工作方式，通过将状态管理和更新逻辑分离出来，使得代码更具可读性和可维护性。相比于简单的 useState，useReducer 更适合处理涉及多个子状态或需要复杂状态转换的场景。为什么使用 init 函数？init 函数：用于延迟初始化状态。它接收 initialArg 作为参数，并返回实际的初始状态。
2025-02-09 10:34:46
633
原创 React 生命周期函数详解
React 组件的生命周期分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有相应的生命周期函数，帮助开发者在组件的不同生命周期中执行特定的操作。通过合理使用这些生命周期函数，可以构建出更加健壮和高效的 React 应用程序。同时，现代 React 开发中推荐使用 Hooks 来替代类组件的生命周期方法，以简化代码并提高可维护性。理解这些生命周期函数及其作用，不仅有助于编写高效且易于维护的 React 组件，还能更好地应对复杂的应用场景。
2025-02-08 21:30:59
925
原创 React受控组件的核心原理与实战精要
在 React 中，受控组件是指那些其值由 React 状态管理的表单元素。与传统的 HTML 表单元素不同，React 的受控组件不会自行维护状态，而是通过 React 组件的状态（`state`）来控制输入值，并在每次用户交互时更新状态。
2025-02-08 21:14:04
1087
原创 深入解析：React 事件处理的秘密与高效实践
在 React 中，事件处理是构建交互式应用的核心。本文将带你深入探索 React 事件处理的机制、最佳实践以及如何避免常见陷阱，助你写出更高效、更健壮的代码。
2025-02-08 20:56:49
990
原创 对于 useMemo 的理解及解析
在 React 中，`useMemo` 是一个 Hook，用于优化性能。它通过缓存计算结果来避免在每次渲染时都进行昂贵的计算。当依赖项没有变化时，`useMemo` 会返回缓存的结果，而不是重新计算。
2025-02-08 20:45:54
731
原创 调用 useState 之后发生了啥(⊙_⊙)?
在 React 中，`useState` 是一个 Hook，用于在函数组件中添加和管理状态。当你调用 `useState` 时，React 会执行一系列步骤来管理状态并确保组件能够正确地重新渲染通过这种方式，React 实现了高效的 UI 更新，确保应用在状态变化时能够快速响应且保持高性能。同时，通过批处理和异步更新机制，React 进一步优化了性能，减少了不必要的渲染操作。
2025-02-08 19:55:20
695
原创 Vue3 对比 React18—不只是技术选择
Vue 3更适合追求开发效率和简单性的团队，尤其是中小型项目。React 18更适合需要高度灵活性和复杂状态管理的团队，尤其是大型项目。最终选择哪个框架，取决于你的项目需求和团队偏好。无论选择哪个，掌握它们的核心思想和最佳实践，都能让你在前端开发中游刃有余！
2025-02-05 10:06:13
748
原创 开放性技术的面试题该如何应对？
技术面问的大部分是项目经历和一些开放性问题，接到需求之后是怎么处理的？项目中遇到的难点、有挑战性的项目是什么？组员出现严重 bug 了应该怎么样应对？单向数据流的优缺点？Vue 和 React 的区别？ 说说性能优化！！
2024-11-26 10:09:28
834
原创 前端面试题大汇总：React 篇
什么是 React？它的主要特点是什么？什么是 JSX？它有什么优点？什么是虚拟 DOM？它是如何工作的？React 中的单向数据流是什么意思？什么是 Props 和 State？它们的区别是什么？如何在 React 中创建一个组件？什么是函数组件和类组件？它们有什么区别？什么是纯组件？为什么要使用纯组件？什么是 React Context API？它解决了什么问题？什么是 Hooks？它们解决了什么问题？什么是 React 的性能优化技术？请列举并简要说明。vue和react的区别？
2024-11-22 14:51:34
1306
原创 前端路由如何从0开始配置？vue-router 的使用
路由是指根据 URL 的不同部分将请求分发到不同的处理函数或页面的过程。路由是单页应用和服务器端渲染，推荐一个组件 vite-plugin-vue-setup-extend ，及详细介绍
2024-10-30 14:25:54
467
原创 CSS 样式在不同浏览器展示效果不同的解决方案 !
在前端样式开发时，同样的样式在不同的浏览器展示不同的效果怎么解决？Normalize.css 插件的使用。Normalize.css 插件处理样式前和处理后的差别对比。css 多浏览器兼容。样式在不同浏览器的兼容。
2024-10-29 19:23:35
526
原创 在 Vue 中如何自动导入项目中的 less 和 scss 变量和文件
Vue 中自动导入项目中的 less变量和文件设置完成后不管用怎么办？如何自动导入 less 和 scss 、css 的公共变量和文件？
2024-10-29 16:51:18
626
原创 React 中使用 Echarts
在 React 中如何使用 Echarts ? 在 React 中使用 Echarts 为什么不生效？ 注意：展示图标的元素一定要加宽高，否则看不到图表的。附赠完整代码。
2024-10-29 10:56:14
452
原创 虚拟滚动列表如何实现？
虚拟滚动列表，虚拟滚动的关键在于只渲染当前视口内可见的数据项，而不是一次性渲染所有数据项。这可以显著提高性能，尤其是在处理大量数据时。container.addEventListener("scroll", throttledHandleScroll);window.addEventListener("beforeunload", () => { container.removeEventListener("scroll", throttledHandleScroll);});
2024-10-21 18:58:43
785
1
原创 面试题：被问的几率最大的前端面试题！！
CSS 选择器的优先级是如何计算的？CSS 如何清除浮动？什么是 JSON？它与 XML 有何不同？解释一下什么是 BOM 和 DOM？JavaScript 中 var, let, const 的区别是什么？CSS 有哪些盒模型？它们之间的区别是什么？解释一下什么是 HTML
2024-10-19 12:28:09
649
原创 浏览器底层中是如何解析CSS选择器的？
从右向左的匹配规则, 只有第一次会遍历所有元素找节点, 而剩下的就是在看父辈祖辈是否满足选择器的条件, 匹配效率大大提升!因此，浏览器遵循 “从右往左” 的规则来解析 CSS 选择器！
2024-10-05 18:12:44
929
原创 React Hooks 的高级用法
useState 回调函数参数详细解读，useEffect清理副作用，如何获取当前鼠标位置，自定义hooks 的高阶用法，useEffect发送请求，useRef 操作DOM 的具体步骤， react 实现跨级组件通讯，useContext的用法, useContext与``的区别
2024-08-21 18:50:19
1734
原创 JS实现：统计字符出现频率/计算文字在文本中的出现次数
统计字符出现频率/计算文字在文本中的出现次数。`reduce()` 它用于将数组的所有元素减少到一个单一的值。这个值可以是任何类型，包括但不限于数字、字符串、对象或数组。
2024-07-13 21:05:13
562
原创 JavaScript 的垃圾回收机制干了什么
所谓垃圾回收, 核心思想就是如何判断内存是否已经不再会被使用了, 如果是, 就视为垃圾, 释放掉。介绍两种常见的浏览器垃圾回收算法: 引用计数 和 标记清除法
2024-06-30 19:35:13
383
原创 JS对象由浅入深
对象由属性和方法组成,对象本质是无序的数据集合, 操作对象数据无非就是 增 /删 /改 /查 .对于多词属性比如中横线分割的属性，点操作就不能用了, 我们可以采取： 对象['属性'] 方式，for 遍历对象的问题：对象没有长度length，而且是无序的，所以我们要利用 for in 遍历对象。内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用。Math的使用，随机数生成。数据存储，内存中堆栈空间分配区别？
2024-06-01 12:58:33
1072
原创 React 中引入 CSS 高阶用法
组件式开发选择合适的`css`解决方案尤为重要通常会遵循以下规则：- 可以编写局部css，不会随意污染其他组件内的原生；- 可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；- 支持所有的css特性：伪类、动画、媒体查询等；- 编写起来简洁方便、最好符合一贯的css风格特点
2024-02-25 16:44:52
1419
1
原创 React 中定时器的用法
在 react 中，要使用定时器，需要先了解它 hooks 的属性,使用 React 的 useState 钩子来管理一个名为 count 的状态变量。这个组件展示了如何使用 setTimeout 与 React 状态一起工作
2024-02-16 15:06:53
945
原创 深入理解 React：从基础到高级特性
React是一个用于构建用户界面的JavaScript库，由Facebook和Instagram开发并维护。它允许开发人员使用组件化的方式构建复杂的用户界面，并提供了一组工具和API，使得开发人员可以轻松地创建可重用、可维护和响应式的用户界面。
2024-01-03 14:23:44
1399
原创 安装 DevEco Studio 后不能用本地 Node.js 打开
安装 DevEco Studio 后第一次打开时，不能用本地 Node.js 打开。答：因为本地 Node.js 文件夹名字中有空格。 **Node.js路径只能包含字母、数字、“。”、“_”、“-”、“:”和“V”**
2023-12-10 16:16:35
1036
原创 鸿蒙前端开发-构建第一个ArkTS应用（Stage模型）
低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。
2023-12-10 16:01:11
1000
原创 DevEco Studio 安装完整流程
DevEco Studio 3.1配套支持HarmonyOS 3.1版本及以上的应用及服务开发，提供了代码智能编辑、低代码开发、双向预览等功能，以及轻量构建工具DevEco Hvigor 、本地模拟器
2023-12-10 15:49:08
271
原创 HarmonyOS Developer——鸿蒙【构建第一个JS应用（FA模型）】
HarmonyOS提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供应用UI开发所必需的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等。FA（Feature Ability）模型：HarmonyOS API 7开始支持的模型，已经不再主推。
2023-12-08 21:52:23
888
原创 useState 和 useReducer 的区别及应用场景
如果你在修改某些组件状态时经常出现问题或者想给组件添加更多逻辑时，我们建议你还是使用 reducer。当然，你也不必整个项目都用 reducer，这是可以自由搭配的。你甚至可以在一个组件中同时使用 useState 和 useReducer。
2023-11-12 21:03:47
503
原创 深度解析 - 行内文本溢出的省略样式如何实现？
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号
2023-09-24 14:45:37
108
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人