- 博客(155)
- 收藏
- 关注
RSS订阅原创 主题切换（2）：CSS 变量（自定义属性）
系统主题切换。在大型项目中，为了更好地组织 CSS 变量（自定义属性）、主题切换，通常会将变量定义在单独的文件中，然后在需要的地方引入。这样可以实现全局变量的统一管理，同时保持代码的可维护性。
2025-12-01 14:28:07
1120
原创 主题切换（1）：css变量的使用（:root）
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
2025-12-01 14:27:24
505
原创 同时使用ReactUse 、 ahooks与性能优化
React项目中同时使用ReactUse和ahooks是可行的，两者功能互补且极少冲突。同时通过按需引入、渲染优化等手段提升性能。
2025-09-26 09:29:47
1220
原创 ReactUse 与ahook对比
ReactUse 和 ahooks 是 React 生态中两大常用 Hook 库，各有侧重。ReactUse 轻量简洁，适合基础开发需求，学习成本低；ahooks 功能更丰富，针对复杂状态管理和性能优化，适合大型应用。关键差异包括：ahooks 提供更完善的文档和社区支持，深度优化渲染性能；ReactUse 则更易上手。典型场景对比显示，简单需求可优先选 ReactUse，复杂业务推荐 ahooks。两者也可在大型项目中结合使用，取长补短。
2025-09-26 09:23:45
694
原创 ReactUse 是一个为 React 开发者设计的实用工具库（陀螺仪、地理位置、虚拟列表、标签页通讯函数）
摘要：VueUse、ReactUse（包含aHooks）和SolidUse是分别针对Vue.js、React和Solid.js的实用工具库，通过提供丰富的Hooks/Composables简化开发流程。React生态中，ReactUse和aHooks为陀螺仪控制、地理位置、虚拟列表等场景提供解决方案，如结合react-use-gesture实现3D交互、use-position获取位置数据、react-window优化长列表性能
2025-09-26 09:21:25
1208
原创 react antd mobile表单时间选择器
在React项目中使用antd mobile 5.x版本时，当官方文档未明确说明如何使用时间选择器组件时，可通过以下两种方案实现精确到时分秒的选择功能：1）检查依赖包中的DatePickerView组件；2）安装react-mobile-datepicker第三方库，配合antd mobile的Popup组件使用。这两种方法都能解决标准DatePicker只能选择到日的问题，其中第二种方案通过截图展示了具体实现效果。
2025-09-05 16:20:24
267
原创 JS,(numeral.js 和 Intl.NumberFormat)格式化数字，丰富的格式化选项（货币、百分比、单位等）,
在 JavaScript 中，numeral.js 和 Intl.NumberFormat 都是用于格式化数字的库/API，但它们的适用场景、功能特性和兼容性有所不同
2025-09-04 20:00:00
1303
原创 useMemo与useCallback使用场景基础使用
React 中的 useMemo 和 useCallback 是用于性能优化的 Hook。useMemo 缓存计算结果，适用于耗时计算（如排序、过滤）或深比较对象；useCallback 缓存函数实例，避免子组件因函数引用变化而重复渲染，或防止 useEffect 重复执行。使用时需确保依赖数组完整，避免闭包问题，但不应过度使用，仅在性能瓶颈时启用。两者常与 React.memo 配合使用，useMemo 优化数据计算，useCallback 优化函数传递。
2025-09-03 14:21:02
1224
原创 react echarts图表监听窗口变化window.addEventListener(‘resize’)与ResizeObserver()
/ 优先使用 ResizeObserver，不支持时回退到 resize + 防抖} else {// 使用 resize 事件 + 防抖（需通过其他方式获取元素尺寸）根据项目需求和浏览器支持情况灵活选择即可。
2025-08-17 18:15:00
541
原创 项目重新发布更新缓存问题，Nginx清除缓存更新网页
本文介绍了如何为单页应用（SPA）配置Nginx缓存策略。通过四类规则优化：1）HTML文件设为永不缓存，确保获取最新入口；2）带Hash的静态资源设为永久缓存，利用immutable特性；3）其他静态资源设置长期缓存；4）SPA路由处理将所有未匹配请求交由index.html处理。这种配置既保证了应用更新及时生效，又充分利用浏览器缓存提升性能，特别适合React/Vue等框架构建的应用。
2025-07-24 11:00:58
410
原创 Yarn 基础使用指南
Yarn 是 npm 的替代品，提供更快的安装速度和可靠的依赖管理。基础使用包括：yarn init初始化项目，yarn add添加依赖，yarn remove移除包，yarn install安装所有依赖。支持全局包管理（yarn global add）和缓存清理（yarn cache clean）。Yarn 工作区可管理多包依赖，常用命令与 npm 类似但更高效，适合大型项目管理。
2025-07-22 09:50:57
534
原创 问题：（接口上传wifi可以，手机流量调用失败），请求实体过长413
React应用在WiFi下接口正常但使用移动数据报错413(请求体过大)，主要原因是移动网络对请求大小限制更严格。解决方案包括：1)服务端调整Nginx/Apache的client_max_body_size等配置；2)前端优化请求数据，分片上传大文件；3)检查移动运营商是否设置了特殊限制。问题通常通过增加服务端请求体大小限制或优化前端请求数据量来解决。
2025-07-22 09:50:38
330
原创 react/vue移动端项目，刷新页面404的原因以及解决办法
在React/Vue移动端项目中，使用history路由模式时，页面刷新会导致404错误。这是因为React Router是客户端路由，刷新时服务器无法定位资源。单页应用（SPA）只有一个index.html入口文件，其他路由通过JS跳转，刷新时URL与服务器资源不匹配，导致404错误。解决办法有两种：一是将路由模式改为hash路由；二是在IIS服务器中配置web.config文件，使用重定向规则将所有请求重写到index.html，确保刷新时仍能正确加载页面。具体配置可参考相关文档。
2025-05-28 12:45:00
491
原创 前端html2canvas打印 HTML页面局部打印
本文介绍了如何使用html2canvas库实现前端HTML页面的局部打印功能。通过导入html2canvas库，开发者可以捕获指定HTML元素的内容并将其转换为Canvas图像。代码示例展示了如何配置html2canvas以捕获高分辨率图像，并处理跨域图片和背景色等细节。捕获的图像随后被转换为数据URL，并通过新窗口打开进行打印。打印窗口在图像加载完成后自动触发打印操作，并可选择在打印后关闭窗口。这一功能适用于需要将网页特定部分转换为图像并打印的场景。
2025-05-28 08:15:00
750
原创 前端html2canvas结合print-js打印页面，并解决多余空白页问题
本文介绍了如何使用html2canvas和print-js实现前端HTML页面的局部打印功能。通过html2canvas将指定HTML元素转换为图片，再利用print-js进行打印。代码示例展示了如何配置html2canvas的参数，如宽度、高度、背景颜色等，并通过printJS打印生成的图片。文章还指出了在打印多页内容时可能出现的空白页问题，并提供了两种解决方案：通过设置body{margin:0}或调整@media print样式来消除边距影响，从而避免空白页的出现。
2025-05-28 08:15:00
566
原创 axios导航守卫统一设置 接口超时时间后，额外给 特殊上传下载接口设置超时时间
axios导航守卫统一设置 接口超时时间后，额外给 特殊上传下载接口设置超时时间。
2025-05-12 07:45:00
184
原创 antd table 无参数样式bug x: ‘max-content‘ 原因
antd table 无参数样式bug x: 'max-content' 原因
2025-04-24 08:45:00
406
原创 antd 4.x Sider + menu设置collapsible 收缩时二级菜单不出现
antd 4.x Sider + menu设置collapsible 收缩时二级菜单不出现
2025-04-14 10:00:00
236
原创 React 严格模式 ＜StrictMode ＞或＜React.StrictMode＞组件
严格模式 <StrictMode > 这可以确保在 内的所有组件都经过检查。如果两个团队在一个产品上工作，并且对于这些检查是否有价值存在分歧，他们需要达成共识或将 下移到树的较低层级tsconfig.json。帮助你在开发过程中尽早地发现组件中的常见错误。
2025-02-24 09:15:00
566
原创 微信公众号-自动登入操作
尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问。appid：来自于后端接口获取，传入window.location.href，获取appid （后端配置，注册后固定的）若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。可以微信开发者工具内进行公众号开发（需要申请公众号，管理员将你加入开发者）对应链接，内部拼接了code,与state。他会根据redirect_uri参数。
2025-01-08 09:35:14
781
原创 解决“万维网发布服务（W3SVC）已停止。除非万维网发布服务（W3SVC）正在运行，否则无法启动网站
解决“万维网发布服务（W3SVC）已停止。除非万维网发布服务（W3SVC）正在运行，否则无法启动网站
2024-12-09 14:17:35
649
1
原创 antd时间控件DatePicker 等安装国际化后还是半中文版英文
antd安装后会自带moment依赖，无需重新安装下载（可能会出现于antd的moment出现版本冲突）卸载antd与moment后，直接安装antd，antd自带的有moment包（node_modules/antd/node_modules目录下），通过import 'moment/locale/zh-cn’命令导入的是自己装的moment包并非antd中的，由于两个moment版本不同，所以导致了引入无效。所以将外部的moment的包进行删除就可以可解决问题
2024-11-30 10:30:00
625
原创 css offset与client属性解析+案例
offset 系列属性和 client 系列属性都是用于获取元素位置和尺寸的重要属性。它们各自有特定的应用场景和计算方式。
2024-09-19 09:00:00
666
原创 react 不使用eject暴露配置（配置less或@/路径），使用react-app-rewired + customize-cra或@craco/craco
react 不使用eject暴露配置（配置less或@/路径），使用react-app-rewired + customize-cra或@craco/craco
2024-09-13 09:12:24
936
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人