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