- 博客(302)
- 收藏
- 关注
RSS订阅原创 Tree Shaking原理
是一个比喻，想象你的代码是一棵树，其中有绿色的、充满生机的树叶（被使用的代码），也有枯黄的、死亡的树叶（未使用的代码）。。它的是。 之所以能实现，完全依赖于 模块系统的静态结构特性。正是这种静态结构，使得打包工具（Webpack、Rollup等）在代码运行之前，就能像编译器一样，准确地分析出：结论： 只对 语法 有效，对 无效 的 过程可以分为两个核心阶段：仅仅标记出来还不够，必须将其从最终的 bundle 中移除。这个清除工作主要由 压缩工具 完成，最常用的
2025-08-28 14:55:28
740
原创 Code Splitting（代码分割）
通过在代码中使用 import() 语法，在运行时按需加载模块。这会将 chunk 命名为 about-page.[hash].js，而不是一个数字 ID，便于调试和识别。prefetch非常适合用于预测用户下一步可能进行的操作（例如，在主页预取关于页的代码）。这是最自然的拆分点。用户访问某个路由时，才加载该路由对应的代码。只有当用户点击按钮时，HeavyModal组件的代码才会被加载。使用魔法注释指导浏览器在空闲时加载资源，优化后续导航的体验。在这个过程中，用户会盯着白屏等待，体验非常差。
2025-08-28 14:40:41
654
原创 对 CSS 工程化的理解
那为什么写 CSS 代码写得好好的，偏偏要转去写“类 CSS”呢？这就和本来用 JS 也可以实现所有功能，但最后却写 React 的 jsx 或者 Vue 的模板语法一样。Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader。：为什么要用预处理器？预处理器，其实就是 CSS 世界的“轮子”。它和预处理器的不同就在于，预处理器处理的是 类CSS，而。Webpack 在裸奔的状态下，是不能处理 CSS 的，的辅助下，是可以处理 CSS 的。
2025-08-27 14:33:00
782
原创 npm run start 的整个过程
的核心魔法在于修改 PATH，优先使用项目本地的可执行文件。目录是连接已安装包和可执行命令的桥梁。生命周期钩子提供了扩展脚本能力的机制。npm start 是 npm run start 的快捷方式，它们的功能完全一样。npm 为一些常用脚本（如 start, test, stop, restart）提供了这种快捷方式。整个过程确保了项目的自包含性和环境一致性：只要你拥有项目的 package.json 和 node_modules，在任何地方运行 npm run start 都会以相同的方式工作。
2025-08-27 11:20:48
775
原创 npm install 的执行过程
锁文件精确地描述了上一轮安装时生成的依赖树，包括所有直接依赖和间接依赖（的依赖）的确切版本和下载地址（resolved 字段）。npm 会以此文件为蓝图来安装，确保每次安装的结果完全一致。postinstall： 在包安装之后运行，这是最常见的一个钩子，常用于编译原生扩展（如 node-gyp）或进行一些初始化操作。如果不同包依赖了同一个包的不同版本（即版本冲突），npm 需要决定如何安置这些版本。这是将下载的包放置到 node_modules 目录的过程，经历了从“嵌套”到“扁平化”的演变。
2025-08-27 10:54:09
1908
原创 什么是Webpack的热更新（Hot Module Replacement）？原理是什么？
生产环境禁用：HMR 相关代码会增加包体积，应通过 process.env.NODE_ENV区分环境。文件变更监听Webpack 监听文件系统变化，触发重新编译。HMR 的实现涉及多个系统的协作，以下是其核心流程。3. 常见问题解决。2. 典型场景。
2025-08-26 17:56:26
912
原创 promise & async await总结
优先使用 async/await 编写更清晰的代码合理使用 Promise 方法（如 all/race）处理并行任务不要忘记错误处理，使用 try/catch 或 .catch()避免不必要的 await，能并行就不要顺序执行注意 Promise 创建时机，避免意外提前执行。
2025-08-18 11:20:28
404
原创 如何让前端页面更快、响应更稳、体验更丝滑？
要让前端页面更快、响应更稳、体验更丝滑，需要从 、、、、 等多个方面入手。以下是具体优化方案。目标：，。适用场景：。实现流程（以 React 为例）使用 动态导入组件Tree Shaking（摇树优化）目标：删除未使用的代码，减少打包体积。适用场景：ES6 模块化项目（使用 import/export）。实现流程确保使用 ES6 模块语法Webpack 配置（生产模式默认启用）检查优化效果使用 webpack-bundle-an
2025-08-14 14:35:20
948
原创 React 18/19 新特性 & 核心 API 深入讲解
代码极简：异步逻辑变得像同步一样直观。告别状态管理样板代码：不再需要手动管理 loading 和 error 状态。与 React 并发模式无缝集成：天然支持流式渲染和选择性注水。
2025-08-14 13:55:05
1106
原创 虚拟列表组件如果滑动速度过快导致渲染性能问题
Ant Design提供的虚拟列表组件（如 VirtualList）基于虚拟滚动技术，适用于展示大量数据的场景。它通过只渲染可视区域的元素，大幅减少 DOM 节点数量，提高性能。常见问题当用户快速滚动时，可能出现：白屏问题：渲染逻辑跟不上滚动速度。卡顿问题：滚动事件触发过于频繁，导致主线程阻塞。解决方向减少滚动触发频率：通过节流降低滚动事件的触发频率。增加缓冲区：提前渲染可视区域上下的数据，避免白屏。分片渲染：将渲染任务拆分成小块，避免主线程阻塞。调整组件属性。
2025-07-14 15:29:21
434
原创 将列表还原为树状结构
在需要存储树结构的情况下，一般由于使用的关系型数据库（如 MySQL），是以类似表格的扁平化方式存储数据。因此不会直接将树结构存储在数据库中，通常是通过邻接表、路径枚举、嵌套集或闭包表来存储。其中，邻接表是最常用的方案之一，其存储模型如下：大部分情况下，会交给应用程序来构造树结构。
2025-07-11 14:51:56
259
原创 setState 是同步还是异步
虽然我们讨论的是setState的同步异步，但这个不是那种异步，只是指setState之后是否state马上变了，是否马上 render。
2025-07-10 11:26:20
328
1
原创 如何理解CDN？说说实现原理？
CDN（Content Delivery Network, 内容分发网络）是一种分布式的网络架构，用于加速静态内容（如图片、视频、CSS、JavaScript 等）和动态内容的分发。它通过在全球范围内部署 边缘服务器，将内容缓存到离用户最近的服务器上，从而减少延迟、提高访问速度和增强用户体验。
2025-07-08 18:30:15
702
原创 一篇文章让你理解for...in 和 for...of区别
配合 Object.keys()、Object.values()、Object.entries()of 适用于遍历 数组、字符串、Map、Set 等所有实现了迭代协议的对象。生成器函数返回一个可迭代对象，可以直接用 for…如果数组有自定义属性，for…of 是 ES6 引入的一种语法，用于遍历。一个对象是可迭代的，必须实现了。索引是字符串，而非数字。，因此会产生潜在问题。遍历对象属性 的循环。尽管可以用它遍历数组。
2025-07-08 15:01:50
752
原创 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
723
原创 SSR解决了什么问题
然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。服务器端渲染的是应用程序的"快照"，如果应用依赖于⼀些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据。
2025-07-01 18:33:05
647
原创 自定义hook～useLocationListener（监听用户位置变化，并将位置信息转换为具体的地址信息）
位置监听：实时获取用户经纬度变化地址解析：使用腾讯地图 SDK 将经纬度转换为具体地址权限管理：处理用户位置授权逻辑数据缓存：将位置信息存储到本地缓存性能优化：使用防抖减少频繁更新// 是否初始化位置监听// 原始位置数据// 处理后的完整位置信息// 用户授权状态。
2025-06-04 11:28:16
431
原创 自定义hook～useExpiredStorage（过期时间的本地存储）
removeAllLocalExp()会遍历所有key，数据量大时需谨慎使用。：实际存储的数据比原始值多约20字节（包含时间戳和过期时间）：removeAllLocalExp()可清理所有过期数据。：依赖客户端本地时间，若用户修改系统时间会影响过期判断。：有效期(毫秒)，例如 1小时 = 3600000。：适用于中小型数据存储（小程序存储上限约10MB）：基于Taro API，支持多端运行。：符合现代React开发模式。：获取数据（自动处理过期）：获取数据时自动校验有效期。：存储数据（带过期时间）
2025-06-04 10:44:09
178
原创 Zustand是什么，在项目中与Redux、MobX、Model等的区别和优势
1. Zustand 的核心优势简单高效：适合中小型项目快速迭代，避免过度设计。轻量灵活：不强制规范，开发者可自由选择架构模式。现代化设计：拥抱 React Hooks 和 TypeScript，契合最新技术趋势。新项目启动，追求开发效率。需要轻量级状态管理，避免 Redux/MobX 的复杂度。团队偏好函数式编程，希望减少模板代码。超大型项目需要严格架构规范（此时 Redux 更合适）。需要复杂响应式逻辑（此时 MobX 更合适）。
2025-05-15 10:30:40
609
原创 react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
React 18 是一次重大的版本升级（发布于2022年），引入了并发渲染（Concurrent Rendering） 和一系列新特性，旨在。
2025-04-02 20:07:48
1110
原创 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
1735
原创 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
1308
原创 react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析
定义： 一个轻量化的js 对象，描述真实的DOM的结构和属性。
2025-03-26 20:37:25
1694
原创 小程序跳转到h5页面
动态网页加载：支持外部 URL 传入身份认证透传：自动附加登录态参数安全分享机制：生成去敏化的分享链接多平台适配：通过 Taro 实现跨小程序平台运行适用于需要在小程序中嵌入 H5 页面且要求保持登录态的业务场景医疗问诊、电商支付等需要网页与原生混合开发的场景。
2025-03-25 20:42:35
484
原创 更新测试环境构建命令以解决构建失败问题
在测试环境下，使用旧版 OpenSSL 提供者，安全地构建 Umi 项目。核心解决了跨平台环境变量设置和 Node.js 新版本的兼容性问题，适用于需要快速适配旧项目的场景。
2025-03-25 19:21:47
1120
原创 PosterRender 实现微信下程序 分享商品生成海报
包括文字、图形、图标、背景等，生成可供下载或直接使用的最终图片格式（如 PNG 或 JPEG）。
2025-03-14 15:17:25
537
原创 详细讲解 position: sticky属性
适用场景：需要元素在滚动时动态固定（如导航栏、表格标题、侧边栏）。关键规则：明确设置阈值方向，确保父容器有滚动空间。优势：无需 JavaScript 即可实现滚动交互，代码简洁高效。合理使用可以显著提升用户体验，但需注意浏览器兼容性和性能影响。
2025-02-20 11:19:26
1096
原创 html2canvas绘制页面并生成图像 &下载
是一个开源的JavaScript库，它允许开发者在用户的浏览器中直接将HTML元素渲染为画布（Canvas），并生成图像。以下是对。
2025-02-05 17:37:29
394
原创 前端怎么处理请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个
通过以上步骤，可以确保在批量请求失败时只弹出一个 toast 通知。关键在于使用一个标志变量（如 hasError）来跟踪请求状态，并在失败时控制 toast 的显示。这样可以避免在多次请求失败时重复弹出通知。如果还没有创建 toast 组件，可以简单实现一个。以下是一个基本的 React toast 组件示例。可以为 toast 组件添加一些基本样式，以便让它更容易辨识。（例如 React 的 useState 或 Redux）来。在处理请求的函数中，使用。
2025-01-03 14:08:52
1004
原创 babel-runtime
是 Babel 的一个核心库，主要用于在运行时提供一些 Babel 转换所需的功能。babel-runtime 在现代 JavaScript 开发中非常有用，尤其是当您需要使用新特性并确保代码在各种环境中都能正常运行时。通过适当的配置和使用，您可以充分利用其优点。
2025-01-03 11:38:22
1029
原创 [React] 生态有哪些
React生态是一个庞大且活跃的系统，它包含了众多优秀的第三方库、插件和工具，这些元素共同构成了React强大的开发环境。
2025-01-03 11:22:33
905
原创 React废弃componentWillMount和componentWillReceiveProps这两个生命周期方法
以及为未来的变更做准备。开发者应该遵循React的推荐实践，使用。这两个生命周期方法的原因主要涉及到。来替代被废弃的方法。
2024-12-09 13:51:48
519
原创 如果子组件是一个 Portal,发生点击事件能冒泡到父组件吗?
（通过Portal创建）。当点击日历框之外的部分时，日历框需要消失。，从而避免不必要的关闭操作。然而，这并不影响事件。，并依次触发所有相关的元素。虽然通过Portal。（包括点击事件）会按照。一个嵌套的元素结构中。子元素触发某个事件时。跨越父组件限制的UI。
2024-12-09 11:45:35
394
原创 为什么 react 需要 fber 架构，而 Vue 却不需要?
React需要Fiber架构，而Vue却不需要，这主要是由于两者在的差异所导致的。
2024-12-09 11:36:24
435
原创 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
674
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人