- 博客(290)
- 收藏
- 关注
RSS订阅原创 将列表还原为树状结构
在需要存储树结构的情况下，一般由于使用的关系型数据库（如 MySQL），是以类似表格的扁平化方式存储数据。因此不会直接将树结构存储在数据库中，通常是通过邻接表、路径枚举、嵌套集或闭包表来存储。其中，邻接表是最常用的方案之一，其存储模型如下：大部分情况下，会交给应用程序来构造树结构。
2025-07-11 14:51:56
168
原创 setState 是同步还是异步
虽然我们讨论的是setState的同步异步，但这个不是那种异步，只是指setState之后是否state马上变了，是否马上 render。
2025-07-10 11:26:20
266
1
原创 如何理解CDN？说说实现原理？
CDN（Content Delivery Network, 内容分发网络）是一种分布式的网络架构，用于加速静态内容（如图片、视频、CSS、JavaScript 等）和动态内容的分发。它通过在全球范围内部署 边缘服务器，将内容缓存到离用户最近的服务器上，从而减少延迟、提高访问速度和增强用户体验。
2025-07-08 18:30:15
634
原创 一篇文章让你理解for...in 和 for...of区别
配合 Object.keys()、Object.values()、Object.entries()of 适用于遍历 数组、字符串、Map、Set 等所有实现了迭代协议的对象。生成器函数返回一个可迭代对象，可以直接用 for…如果数组有自定义属性，for…of 是 ES6 引入的一种语法，用于遍历。一个对象是可迭代的，必须实现了。索引是字符串，而非数字。，因此会产生潜在问题。遍历对象属性 的循环。尽管可以用它遍历数组。
2025-07-08 15:01:50
701
原创 Taro性能优化30招，让你的小程序飞起来
使用 taro-plugin-image-mini 自动压缩图片。支持 React Server Components（SSR 优化）避免在全局 Store 存储大对象（如 10MB 的省市数据）使用 swr 或 taro-request 做请求缓存。：通过 font-spider 提取页面用到的字符。更精简的运行时体积（移除冗余 polyfill）更快的 React 18 并发渲染（实验性）FCP (首次内容渲染)FMP (首次有效渲染)setData 调用频次。
2025-07-08 14:09:10
596
原创 SSR解决了什么问题
然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。服务器端渲染的是应用程序的"快照"，如果应用依赖于⼀些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据。
2025-07-01 18:33:05
611
原创 自定义hook～useLocationListener（监听用户位置变化，并将位置信息转换为具体的地址信息）
位置监听：实时获取用户经纬度变化地址解析：使用腾讯地图 SDK 将经纬度转换为具体地址权限管理：处理用户位置授权逻辑数据缓存：将位置信息存储到本地缓存性能优化：使用防抖减少频繁更新// 是否初始化位置监听// 原始位置数据// 处理后的完整位置信息// 用户授权状态。
2025-06-04 11:28:16
408
原创 自定义hook～useExpiredStorage（过期时间的本地存储）
removeAllLocalExp()会遍历所有key，数据量大时需谨慎使用。：实际存储的数据比原始值多约20字节（包含时间戳和过期时间）：removeAllLocalExp()可清理所有过期数据。：依赖客户端本地时间，若用户修改系统时间会影响过期判断。：有效期(毫秒)，例如 1小时 = 3600000。：适用于中小型数据存储（小程序存储上限约10MB）：基于Taro API，支持多端运行。：符合现代React开发模式。：获取数据（自动处理过期）：获取数据时自动校验有效期。：存储数据（带过期时间）
2025-06-04 10:44:09
142
原创 Zustand是什么，在项目中与Redux、MobX、Model等的区别和优势
1. Zustand 的核心优势简单高效：适合中小型项目快速迭代，避免过度设计。轻量灵活：不强制规范，开发者可自由选择架构模式。现代化设计：拥抱 React Hooks 和 TypeScript，契合最新技术趋势。新项目启动，追求开发效率。需要轻量级状态管理，避免 Redux/MobX 的复杂度。团队偏好函数式编程，希望减少模板代码。超大型项目需要严格架构规范（此时 Redux 更合适）。需要复杂响应式逻辑（此时 MobX 更合适）。
2025-05-15 10:30:40
493
原创 react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
React 18 是一次重大的版本升级（发布于2022年），引入了并发渲染（Concurrent Rendering） 和一系列新特性，旨在。
2025-04-02 20:07:48
915
原创 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
1379
原创 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
1250
原创 react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析
定义： 一个轻量化的js 对象，描述真实的DOM的结构和属性。
2025-03-26 20:37:25
1631
原创 小程序跳转到h5页面
动态网页加载：支持外部 URL 传入身份认证透传：自动附加登录态参数安全分享机制：生成去敏化的分享链接多平台适配：通过 Taro 实现跨小程序平台运行适用于需要在小程序中嵌入 H5 页面且要求保持登录态的业务场景医疗问诊、电商支付等需要网页与原生混合开发的场景。
2025-03-25 20:42:35
415
原创 更新测试环境构建命令以解决构建失败问题
在测试环境下，使用旧版 OpenSSL 提供者，安全地构建 Umi 项目。核心解决了跨平台环境变量设置和 Node.js 新版本的兼容性问题，适用于需要快速适配旧项目的场景。
2025-03-25 19:21:47
1012
原创 PosterRender 实现微信下程序 分享商品生成海报
包括文字、图形、图标、背景等，生成可供下载或直接使用的最终图片格式（如 PNG 或 JPEG）。
2025-03-14 15:17:25
476
原创 详细讲解 position: sticky属性
适用场景：需要元素在滚动时动态固定（如导航栏、表格标题、侧边栏）。关键规则：明确设置阈值方向，确保父容器有滚动空间。优势：无需 JavaScript 即可实现滚动交互，代码简洁高效。合理使用可以显著提升用户体验，但需注意浏览器兼容性和性能影响。
2025-02-20 11:19:26
1000
原创 html2canvas绘制页面并生成图像 &下载
是一个开源的JavaScript库，它允许开发者在用户的浏览器中直接将HTML元素渲染为画布（Canvas），并生成图像。以下是对。
2025-02-05 17:37:29
360
原创 前端怎么处理请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个
通过以上步骤，可以确保在批量请求失败时只弹出一个 toast 通知。关键在于使用一个标志变量（如 hasError）来跟踪请求状态，并在失败时控制 toast 的显示。这样可以避免在多次请求失败时重复弹出通知。如果还没有创建 toast 组件，可以简单实现一个。以下是一个基本的 React toast 组件示例。可以为 toast 组件添加一些基本样式，以便让它更容易辨识。（例如 React 的 useState 或 Redux）来。在处理请求的函数中，使用。
2025-01-03 14:08:52
930
原创 babel-runtime
是 Babel 的一个核心库，主要用于在运行时提供一些 Babel 转换所需的功能。babel-runtime 在现代 JavaScript 开发中非常有用，尤其是当您需要使用新特性并确保代码在各种环境中都能正常运行时。通过适当的配置和使用，您可以充分利用其优点。
2025-01-03 11:38:22
890
原创 [React] 生态有哪些
React生态是一个庞大且活跃的系统，它包含了众多优秀的第三方库、插件和工具，这些元素共同构成了React强大的开发环境。
2025-01-03 11:22:33
828
原创 React废弃componentWillMount和componentWillReceiveProps这两个生命周期方法
以及为未来的变更做准备。开发者应该遵循React的推荐实践，使用。这两个生命周期方法的原因主要涉及到。来替代被废弃的方法。
2024-12-09 13:51:48
486
原创 如果子组件是一个 Portal,发生点击事件能冒泡到父组件吗?
（通过Portal创建）。当点击日历框之外的部分时，日历框需要消失。，从而避免不必要的关闭操作。然而，这并不影响事件。，并依次触发所有相关的元素。虽然通过Portal。（包括点击事件）会按照。一个嵌套的元素结构中。子元素触发某个事件时。跨越父组件限制的UI。
2024-12-09 11:45:35
351
原创 为什么 react 需要 fber 架构，而 Vue 却不需要?
React需要Fiber架构，而Vue却不需要，这主要是由于两者在的差异所导致的。
2024-12-09 11:36:24
407
原创 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
632
原创 HOC vs Render Props vs Hooks
HOC 写法看似简洁，但开发者无法通过阅读 HOC 的调用辨别出方法的作用：看不到接收和返回的结构，增加调试和修复问题的成本；使用 Hooks 时，能清晰看到组件接收的 props 以及传递的功能等，可以对 props 属性重命名，不会有命名冲突，不存在嵌套地狱，且没有数据源获取及使用范围的限制。HOC、Render Props、Hooks 都有提高代码复用性的能力，但根据其设计模式上的差别，适用范围也会有所差异：HOC 基于单一功能原则，对传入组件进行增强；的规则，会造成项目臃肿和难以维护的问题。
2024-12-04 13:48:30
1272
原创 Babel 的原理
是 编译器：它能让开发者在开发过程中，直接使用各类方言（如 ）或新的语法特性，而不需要考虑运行环境，因为 可以做到按需转换为； 内部原理是将 ，。AST 抽象语法树简单定义：。利用在线 playground 调试，可以对 有个直观感受：。 是表示，能。适用于做。之所以用树来进行分析或转换，是因为。常见使用场景：：，基于各种规则进行优化（如 IF 语句优化；移除不可访问代码；移除 debugger 等），从而生成，最终输出精简的代码结果。Babel 编译流程解析阶段： 默认使用 将代码转换为
2024-12-04 11:31:14
768
原创 一文搞懂grid布局 和 flex 布局及其区别
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Grid 可以做Flexbox做不了的事，Flexbox 比 Grid 兼容性更好，他们可以共同工作。Grid item可以成为flexbox容器，flex item可以成为grid 容器。综上所述，可以根据业务场景需要选择相应布局。
2024-11-05 18:58:16
2753
原创 深度优先搜索（DFS）和广度优先搜索（BFS）
*深度优先搜索（DFS）和广度优先搜索（BFS）**是图论和树结构中最基础、最常用的两种遍历算法。它们在解决许多算法问题时都非常重要，例如路径搜索、连通性检测、拓扑排序等。下面我将详细讲解这两种算法的概念、实现方式、应用场景，以及它们之间的区别深度优先搜索（DFS）特点：沿着某一路径尽可能深入，然后回溯，适合遍历所有可能的路径。数据结构：栈（递归实现或显式栈）。应用：组合、排列、子集、连通性、拓扑排序等。广度优先搜索（BFS）特点：逐层遍历，先访问距离起点最近的节点，适合寻找最短路径。数据结构。
2024-10-22 11:08:45
1659
原创 classnames 使用
classnames是一个用于动态地构建CSS类名字符串的JavaScript库，常用于React项目中。它可以根据条件来组合多个类名，简化了在模板中根据逻辑添加或删除CSS类名的过程。字符串参数// 结果："class1 class2"对象参数（条件类名// 结果："class1"// 结果："class1 class2"// 根据 condition 的值动态组合类名classnames 是一个用于动态组合 CSS 类名的实用工具，在 React 开发中非常常用。它简化了。
2024-10-15 13:55:42
2143
原创 ES5、ES6 如何实现继承
继承是指子类型具备父类型的属性和行为，使代码得以复用，做到设计上的分离。JavaScript 中的继承主要通过原型链和构造函数来实现。ES6 中 class 的继承、原型链继承、寄生组合式继承等。
2024-08-30 15:19:04
1210
1
原创 jsx语法转换生成虚拟DOM
它的本质是什么吗？运行中它会做如何的转换？jsx内部又是怎么生成了虚拟DOM？虚拟DOM又是如何挂载到真实DOM上去的？
2024-08-08 19:41:48
778
原创 Fiber原理
在完成一部分任务之后，将控制权交回浏览器，让浏览器有时间在进行页面的渲染。从编码角度来看，Fiber 是 React 内部所定义的一种数据结构（链表），它是 Fiber 树结构的节点单位，也就是 React 16 新架构下的虚拟 DOM。在这样的机制下，如果 JS 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿。，并给不同的任务赋予不同的优先级，其中每个任务更新单元为 React Element 对应的 Fiber 节点。
2024-08-07 20:21:20
706
原创 JavaScript 异步编程
如果内部的 await 等待的异步任务之间没有依赖关系，且需要获取这些异步操作的结果，可以使用 Promise.allSettled() 同时执行这些任务并获得结果。setInterval 会按设定的时间间隔固定调用，其中 setInterval 里面的代码的执行时间也包含在内，所以实际间隔小于设定的时间间隔。发布/订阅模式是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。当后台运行的代码结束，就调用回调函数，通知工作已经完成。
2024-08-07 19:22:15
887
原创 二叉搜索树的第 k 大的节点
它是一棵空树，或者是具有下列性质的二叉树： 若它的左子树不空，则左子树上所有结点的值均小于它的根结点的值；若它的右子树不空，则右子树上所有结点的值均大于它的根结点的值；它的左、右子树也分别为二叉排序树。利用二叉搜索树的特性进行中序遍历。先遍历左节点，然后根节点，最后遍历右节点，得到的是一个递增序列，那么序列的倒序为递减序列。因此这道题我们可以转变为求二叉搜索树中序遍历倒序的第 k 个数。给定一棵二叉搜索树，请找出其中第 k 大的节点。思路还是二叉树的中序遍历，利用栈的方式进行遍历。
2024-08-01 19:37:28
438
原创 “八股文”在实际工作中是助力、阻力还是空谈？
八股文”一词在现代职场，特别是在IT行业中，引起了广泛的讨论。这种固定格式的知识体系在程序员面试中尤为常见，经常被用来考察应聘者对基础理论和技术框架的掌握程度。但在实际工作中，“八股文”的作用究竟是助力、阻力，还是纯粹的空谈？我们可以从几个不同的角度来探讨这一问题。
2024-07-31 11:38:59
497
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人