- 博客(284)
- 收藏
- 关注
RSS订阅原创 自定义hook～useLocationListener（监听用户位置变化，并将位置信息转换为具体的地址信息）
位置监听：实时获取用户经纬度变化地址解析：使用腾讯地图 SDK 将经纬度转换为具体地址权限管理：处理用户位置授权逻辑数据缓存：将位置信息存储到本地缓存性能优化：使用防抖减少频繁更新// 是否初始化位置监听// 原始位置数据// 处理后的完整位置信息// 用户授权状态。
2025-06-04 11:28:16
400
原创 自定义hook～useExpiredStorage（过期时间的本地存储）
removeAllLocalExp()会遍历所有key，数据量大时需谨慎使用。：实际存储的数据比原始值多约20字节（包含时间戳和过期时间）：removeAllLocalExp()可清理所有过期数据。：依赖客户端本地时间，若用户修改系统时间会影响过期判断。：有效期(毫秒)，例如 1小时 = 3600000。：适用于中小型数据存储（小程序存储上限约10MB）：基于Taro API，支持多端运行。：符合现代React开发模式。：获取数据（自动处理过期）：获取数据时自动校验有效期。：存储数据（带过期时间）
2025-06-04 10:44:09
126
原创 Zustand是什么，在项目中与Redux、MobX、Model等的区别和优势
1. Zustand 的核心优势简单高效：适合中小型项目快速迭代，避免过度设计。轻量灵活：不强制规范，开发者可自由选择架构模式。现代化设计：拥抱 React Hooks 和 TypeScript，契合最新技术趋势。新项目启动，追求开发效率。需要轻量级状态管理，避免 Redux/MobX 的复杂度。团队偏好函数式编程，希望减少模板代码。超大型项目需要严格架构规范（此时 Redux 更合适）。需要复杂响应式逻辑（此时 MobX 更合适）。
2025-05-15 10:30:40
441
原创 react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
React 18 是一次重大的版本升级（发布于2022年），引入了并发渲染（Concurrent Rendering） 和一系列新特性，旨在。
2025-04-02 20:07:48
847
原创 react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
工具支持：需配合 Babel 插件（如 @babel/plugin-transform-react-jsx）。（在 React 16.3 标记为 UNSAFE_，React 17 中彻底移除警告，但代码仍可运行）。通过新的 JSX 运行时（如 react/jsx-runtime），无需手动引入 React。避免全局事件冲突，更符合预期行为（如嵌套 React 应用的事件冒泡）。支持多个 React 版本共存（如微前端场景）。（在浏览器完成屏幕更新后执行），提升性能。（如事件系统、Fiber 调度）为。
2025-04-02 19:35:21
1220
原创 react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react16
React 16.3+ 新增 forwardRef，支持向子组件传递 Ref（解决 HOC 中的 Ref 穿透问题）。引入 React.createRef() 和回调 Refs 的标准化用法，替代字符串类型的 Refs（已废弃）。客户端 hydrate() 方法替代 render()，更高效地复用服务端渲染的 HTML。生命周期方法，允许组件捕获子组件树中的 JavaScript 错误，避免整个应用崩溃。(prevProps, prevState)（在 DOM 更新前捕获信息，如滚动位置）。
2025-04-02 18:52:54
1226
原创 react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析
定义： 一个轻量化的js 对象，描述真实的DOM的结构和属性。
2025-03-26 20:37:25
1586
原创 小程序跳转到h5页面
动态网页加载：支持外部 URL 传入身份认证透传：自动附加登录态参数安全分享机制：生成去敏化的分享链接多平台适配：通过 Taro 实现跨小程序平台运行适用于需要在小程序中嵌入 H5 页面且要求保持登录态的业务场景医疗问诊、电商支付等需要网页与原生混合开发的场景。
2025-03-25 20:42:35
397
3原创 更新测试环境构建命令以解决构建失败问题
在测试环境下，使用旧版 OpenSSL 提供者，安全地构建 Umi 项目。核心解决了跨平台环境变量设置和 Node.js 新版本的兼容性问题，适用于需要快速适配旧项目的场景。
2025-03-25 19:21:47
989
原创 PosterRender 实现微信下程序 分享商品生成海报
包括文字、图形、图标、背景等，生成可供下载或直接使用的最终图片格式（如 PNG 或 JPEG）。
2025-03-14 15:17:25
464
原创 详细讲解 position: sticky属性
适用场景：需要元素在滚动时动态固定（如导航栏、表格标题、侧边栏）。关键规则：明确设置阈值方向，确保父容器有滚动空间。优势：无需 JavaScript 即可实现滚动交互，代码简洁高效。合理使用可以显著提升用户体验，但需注意浏览器兼容性和性能影响。
2025-02-20 11:19:26
939
原创 html2canvas绘制页面并生成图像 &下载
是一个开源的JavaScript库，它允许开发者在用户的浏览器中直接将HTML元素渲染为画布（Canvas），并生成图像。以下是对。
2025-02-05 17:37:29
351
原创 前端怎么处理请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个
通过以上步骤，可以确保在批量请求失败时只弹出一个 toast 通知。关键在于使用一个标志变量（如 hasError）来跟踪请求状态，并在失败时控制 toast 的显示。这样可以避免在多次请求失败时重复弹出通知。如果还没有创建 toast 组件，可以简单实现一个。以下是一个基本的 React toast 组件示例。可以为 toast 组件添加一些基本样式，以便让它更容易辨识。（例如 React 的 useState 或 Redux）来。在处理请求的函数中，使用。
2025-01-03 14:08:52
905
原创 babel-runtime
是 Babel 的一个核心库，主要用于在运行时提供一些 Babel 转换所需的功能。babel-runtime 在现代 JavaScript 开发中非常有用，尤其是当您需要使用新特性并确保代码在各种环境中都能正常运行时。通过适当的配置和使用，您可以充分利用其优点。
2025-01-03 11:38:22
857
原创 [React] 生态有哪些
React生态是一个庞大且活跃的系统，它包含了众多优秀的第三方库、插件和工具，这些元素共同构成了React强大的开发环境。
2025-01-03 11:22:33
813
原创 React废弃componentWillMount和componentWillReceiveProps这两个生命周期方法
以及为未来的变更做准备。开发者应该遵循React的推荐实践，使用。这两个生命周期方法的原因主要涉及到。来替代被废弃的方法。
2024-12-09 13:51:48
478
原创 如果子组件是一个 Portal,发生点击事件能冒泡到父组件吗?
（通过Portal创建）。当点击日历框之外的部分时，日历框需要消失。，从而避免不必要的关闭操作。然而，这并不影响事件。，并依次触发所有相关的元素。虽然通过Portal。（包括点击事件）会按照。一个嵌套的元素结构中。子元素触发某个事件时。跨越父组件限制的UI。
2024-12-09 11:45:35
339
原创 为什么 react 需要 fber 架构，而 Vue 却不需要?
React需要Fiber架构，而Vue却不需要，这主要是由于两者在的差异所导致的。
2024-12-09 11:36:24
396
原创 react 和 react-dom 是什么关系
如ReactDOMServer.renderToString()或ReactDOMServer.renderToStaticMarkup()，开发者可以将。（Server-Side Rendering, SSR）的功能。React和React DOM是两个与React。在React 18及以上版本中，React DOM的主要方法包括。此外，React DOM还提供了。事件（如点击、输入等）。React的核心算法。
2024-12-06 18:09:00
616
原创 HOC vs Render Props vs Hooks
HOC 写法看似简洁，但开发者无法通过阅读 HOC 的调用辨别出方法的作用：看不到接收和返回的结构，增加调试和修复问题的成本；使用 Hooks 时，能清晰看到组件接收的 props 以及传递的功能等，可以对 props 属性重命名，不会有命名冲突，不存在嵌套地狱，且没有数据源获取及使用范围的限制。HOC、Render Props、Hooks 都有提高代码复用性的能力，但根据其设计模式上的差别，适用范围也会有所差异：HOC 基于单一功能原则，对传入组件进行增强；的规则，会造成项目臃肿和难以维护的问题。
2024-12-04 13:48:30
1271
原创 Babel 的原理
是 编译器：它能让开发者在开发过程中，直接使用各类方言（如 ）或新的语法特性，而不需要考虑运行环境，因为 可以做到按需转换为； 内部原理是将 ，。AST 抽象语法树简单定义：。利用在线 playground 调试，可以对 有个直观感受：。 是表示，能。适用于做。之所以用树来进行分析或转换，是因为。常见使用场景：：，基于各种规则进行优化（如 IF 语句优化；移除不可访问代码；移除 debugger 等），从而生成，最终输出精简的代码结果。Babel 编译流程解析阶段： 默认使用 将代码转换为
2024-12-04 11:31:14
764
原创 一文搞懂grid布局 和 flex 布局及其区别
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Grid 可以做Flexbox做不了的事，Flexbox 比 Grid 兼容性更好，他们可以共同工作。Grid item可以成为flexbox容器，flex item可以成为grid 容器。综上所述，可以根据业务场景需要选择相应布局。
2024-11-05 18:58:16
2630
原创 深度优先搜索（DFS）和广度优先搜索（BFS）
*深度优先搜索（DFS）和广度优先搜索（BFS）**是图论和树结构中最基础、最常用的两种遍历算法。它们在解决许多算法问题时都非常重要，例如路径搜索、连通性检测、拓扑排序等。下面我将详细讲解这两种算法的概念、实现方式、应用场景，以及它们之间的区别深度优先搜索（DFS）特点：沿着某一路径尽可能深入，然后回溯，适合遍历所有可能的路径。数据结构：栈（递归实现或显式栈）。应用：组合、排列、子集、连通性、拓扑排序等。广度优先搜索（BFS）特点：逐层遍历，先访问距离起点最近的节点，适合寻找最短路径。数据结构。
2024-10-22 11:08:45
1639
原创 classnames 使用
classnames是一个用于动态地构建CSS类名字符串的JavaScript库，常用于React项目中。它可以根据条件来组合多个类名，简化了在模板中根据逻辑添加或删除CSS类名的过程。字符串参数// 结果："class1 class2"对象参数（条件类名// 结果："class1"// 结果："class1 class2"// 根据 condition 的值动态组合类名classnames 是一个用于动态组合 CSS 类名的实用工具，在 React 开发中非常常用。它简化了。
2024-10-15 13:55:42
2075
原创 ES5、ES6 如何实现继承
继承是指子类型具备父类型的属性和行为，使代码得以复用，做到设计上的分离。JavaScript 中的继承主要通过原型链和构造函数来实现。ES6 中 class 的继承、原型链继承、寄生组合式继承等。
2024-08-30 15:19:04
1201
原创 jsx语法转换生成虚拟DOM
它的本质是什么吗？运行中它会做如何的转换？jsx内部又是怎么生成了虚拟DOM？虚拟DOM又是如何挂载到真实DOM上去的？
2024-08-08 19:41:48
777
原创 Fiber原理
在完成一部分任务之后，将控制权交回浏览器，让浏览器有时间在进行页面的渲染。从编码角度来看，Fiber 是 React 内部所定义的一种数据结构（链表），它是 Fiber 树结构的节点单位，也就是 React 16 新架构下的虚拟 DOM。在这样的机制下，如果 JS 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿。，并给不同的任务赋予不同的优先级，其中每个任务更新单元为 React Element 对应的 Fiber 节点。
2024-08-07 20:21:20
687
原创 JavaScript 异步编程
如果内部的 await 等待的异步任务之间没有依赖关系，且需要获取这些异步操作的结果，可以使用 Promise.allSettled() 同时执行这些任务并获得结果。setInterval 会按设定的时间间隔固定调用，其中 setInterval 里面的代码的执行时间也包含在内，所以实际间隔小于设定的时间间隔。发布/订阅模式是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。当后台运行的代码结束，就调用回调函数，通知工作已经完成。
2024-08-07 19:22:15
887
原创 二叉搜索树的第 k 大的节点
它是一棵空树，或者是具有下列性质的二叉树： 若它的左子树不空，则左子树上所有结点的值均小于它的根结点的值；若它的右子树不空，则右子树上所有结点的值均大于它的根结点的值；它的左、右子树也分别为二叉排序树。利用二叉搜索树的特性进行中序遍历。先遍历左节点，然后根节点，最后遍历右节点，得到的是一个递增序列，那么序列的倒序为递减序列。因此这道题我们可以转变为求二叉搜索树中序遍历倒序的第 k 个数。给定一棵二叉搜索树，请找出其中第 k 大的节点。思路还是二叉树的中序遍历，利用栈的方式进行遍历。
2024-08-01 19:37:28
436
原创 “八股文”在实际工作中是助力、阻力还是空谈？
八股文”一词在现代职场，特别是在IT行业中，引起了广泛的讨论。这种固定格式的知识体系在程序员面试中尤为常见，经常被用来考察应聘者对基础理论和技术框架的掌握程度。但在实际工作中，“八股文”的作用究竟是助力、阻力，还是纯粹的空谈？我们可以从几个不同的角度来探讨这一问题。
2024-07-31 11:38:59
493
原创 大文件的分片上传、断点续传及其相关拓展
这里套用唐僧的一句话，你不说我怎么知道呢。其实就是time-slice概念，React中Fiber架构的核心理念，利用浏览器的空闲时间，计算大的diff过程，中途又任何的高优先级任务，比如动画和输入，都会中断diff任务， 虽然整个计算量没有减小，但是大大提高了用户的交互体验。慢启动策略：由于文件大小不一，我们每个切片的大小设置成固定的也有点略显笨拙，我们可以参考TCP协议的慢启动策略， 设置一个初始大小，根据上传任务完成的时候，来动态调整下一个切片的大小， 确保文件切片的大小和当前网速匹配。
2024-07-25 17:06:53
1023
原创 如何减少白屏的时间
DNS 解析是一个开销较大的过程，一次 DNS 解析通常需要耗费几十到上百毫秒，而在移动端网络或其他弱网环境下 DNS 解析延迟会更加严重，对 DNS 解析优化则可以减少这一步骤的耗时。DNS 解析优化是性能优化重要的一环，DNS 的作用是根据域名获取对应的 IP 地址，获取之后后续的 HTTP 流程才能进行下去。骨架屏是在需要等待加载内容的位置提供一些图形组合占位，提前给用户描述页面的基础结构，等待数据加载完成之后，再替换成实际的内容。骨架屏可以在数据加载前，提前渲染页面，缩短白屏时间，提升用户体验。
2024-07-24 16:26:00
717
原创 详细讲解下 算法中的 堆栈
在程序的内存管理上，堆内存是用于动态分配的内存。在图算法中，如 Dijkstra 算法和 Prim 算法，堆结构用来管理和更新节点的优先级，以快速找到下一个最短路径的候选节点或最小生成树的下一个节点。在图和树的遍历中，深度优先搜索（DFS）算法使用栈来记住每个分支上的节点，这样可以在达到末端后回溯到上一个节点。：从堆中删除元素通常指删除根节点，在删除后，通常将最后一个元素移动到根位置，然后通过下沉操作重新调整堆。：在堆中插入新元素时，新元素被放在树的末端，然后通过一系列上浮操作调整以保持堆的性质。
2024-07-18 20:37:45
624
原创 前端路由实现
对于Web开发来说，路由的实质是URL 到对应的处理程序的映射。前端路由根据具体实现方式的不同，可以分为Hash 路由 和 History 路由两种，这两种实现方式各有其优势和局限性。
2024-07-16 20:29:25
426
原创 垃圾回收机制
在垃圾回收阶段，检查并按需复制 From-Space 中的可访问对象到 To-Space 或老生代，并释放 From-Space 中的不可访问对象占用的内存空间；V8 对新生代内存空间采用了 Scavenger 算法，该算法使用了 semi-space（半空间） 的设计：将堆一分为二，始终只使用一半的空间：From-Space 为使用空间，To-Space 为空闲空间。整理是将可访问对象，往内存一端移动的过程。即新生代中的对象为存活时间较短的对象，老生代中的对象为存活时间较长或常驻内存的对象。
2024-07-09 16:05:26
797
原创 设计模式-访问者模式
访问者模式是一种行为设计模式，它允许你向一个对象结构（通常是一个复杂的对象组合）添加更多操作而无需修改这些对象的类。这种模式是通过创建一个外部的访问者类来实现的，这个类实现了对各种元素（组成对象的部分）的操作。访问者模式在 JavaScript 中可能不像在Java 或 C#中那样常见，因为JavaScript的灵活性允许我们在运行时添加或更改对象的行为。在处理复杂的对象结构，特别是当这些结构在多个不同的上下文中以不同的方式被处理时，访问者模式提供了一种清晰和可维护的方式来分离操作和对象本身。
2024-06-27 10:58:18
435
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人