- 博客(456)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 ReactNative Expo 使用总结（基础）
本文系统总结了React Native开发中的核心知识点，包括路由、样式、组件和动画等关键内容。在路由方面，详细介绍了Expo基于文件的路由框架及其配置方法。样式部分对比了StyleSheet和Styled Components的优缺点，并提供了样式管理的最佳实践。组件章节全面解析了View、Text、ScrollView等基础组件，以及列表、模态框等复杂组件的使用方法。动画部分重点讲解了原生Animated和Reanimated库的使用技巧。此外，还涵盖了第三方常用组件（如WebView、手势处理）、图标
2025-12-05 20:38:26
1112
2
原创 electron typescript运行并设置eslint检测
使用main.js作为入口文件时，我们只要找到main.js路径配置到package.json的“main”位置就行了，但直接改.ts肯定会报错，所以我们需要让electron找到main.ts编译后转的.js文件的位置。终端运行：你会看到项目的ts文件被转为js文件存到了“outDir”指向的文件夹里（这里是".electron"）我的：这里的"main"没太大影响，看后面的步骤。终端运行：可以看到electron程序正常启动了。即可进行eslint纠正检测。3、安装eslint。五、配置eslint。
2025-01-28 20:46:08
1983
原创 SpringCloud Gateway Netty Websocket实现高性能聊天系统集群方案
当用户在不同Netty服务器上时（此时发送与接收者都在线），我会先让服务器去Redis获取对应用户名的ChannelId，先在本地服务器中查找，若查询到该ChannelId的Channel则直接转发，否则为不在同一个Netty服务器上，发送Channel寻找的信号到MQ进行广播，其他服务器获取到广播后查询直接是否有该ChannelId的Channel，若有则转发；有了这样的对象以后，我便可对发送过来的消息进行序列化与反序列化获取数据，通过消息对象中的数据是否正确与是否认证来决定消息的转发。
2023-03-01 15:33:01
3323
7
原创 TanStack Query(React Query) 常用api及操作总结
本文总结了React Query的常用API及操作技巧，涵盖数据查询、修改、缓存管理等核心功能。主要内容包括：1. 常用API分类介绍（查询Hook、修改Hook、缓存管理方法）；2. 典型操作场景（基础/分页查询、乐观更新、批量操作）；3. 优化技巧（防抖查询、依赖查询）；4. 全局配置与请求取消；5. 实战示例（表单提交、分页列表）；6. 最佳实践（查询键设计、缓存策略等）。文章提供了详细的代码示例，帮助开发者高效处理React应用中的数据交互需求。
2025-12-21 20:00:21
313
原创 TailWindCss 核心功能总结
TailwindCSS是一款实用优先的原子化CSS框架，通过预定义类名组合快速构建界面，显著提升开发效率。其核心优势包括：实用类直接内联HTML减少样式文件切换、内置响应式设计系统、自动优化的生产包体积（<10KB）。特别适合Web应用开发，已被ChatGPT、Vercel等AI产品采用。提供完善的文档和IDE插件支持，支持自定义主题配置（通过tailwind.config.js）和动态类名管理。虽然学习初期需记忆类名，但通过组件化封装可保持代码整洁。在AI时代因其开发速度和一致性优势，成为现代前端开
2025-12-21 17:43:01
1187
原创 TanStack Query(React Query) 使用总结
React Query（现称TanStack Query）是一个专注于数据获取、缓存和状态管理的React库，通过简化异步逻辑处理提升开发效率。核心功能包括自动化加载/错误处理、智能缓存和声明式Hooks。安装步骤包括创建QueryClient实例、使用Provider包裹应用组件，并通过useQuery发起请求。关键概念如useQuery（用于GET请求）和useMutation（用于增删改操作）提供了数据管理和缓存控制能力。支持全局配置缓存时间（gcTime/staleTime）和灵活的失效策略（主动失
2025-12-14 21:31:49
892
原创 React useMemo和redux createSelector的区别
createSelector与useMemo都是记忆化工具，但适用场景不同。createSelector用于Redux状态派生数据（全局缓存），当输入选择器结果变化时重新计算；useMemo用于组件内部基于props/state的昂贵计算（组件级缓存）。主要区别在于：createSelector面向Redux store数据，支持浅比较；useMemo面向组件数据，基于引用比较。建议组合使用：用createSelector处理Redux数据转换，再用useMemo优化组件内派生数据。典型用例：createS
2025-11-10 16:41:14
421
转载 React Jest单元测试
React单元测试快速指南：介绍React组件测试的基本方法，包括Jest和React Testing Library的使用。涵盖测试渲染、交互模拟和断言验证等核心技巧，适合初学者快速上手。另附详细教程链接，供深入学习和实践参考。
2025-11-07 14:40:00
63
原创 taro UI 的icon和自定义iconfont的icon冲突
摘要：Taro项目同时使用TaroUI和阿里iconfont时出现图标冲突问题。原因是两者font-family名称相同导致图标未正确显示。解决方案是将iconfont.css中的font-family修改为其他名称，避免命名冲突。该方案有效解决了TaroUI组件与阿里图标库的兼容性问题。
2025-11-05 15:14:57
216
原创 Taro 自定义tab栏和自定义导航栏
本文介绍了在Taro小程序中实现自定义TabBar和导航栏的优化方案。文章首先分析了官方方法的不足：无法使用项目自带的iconfont库、每次切换会重新渲染TabBar等问题，提出了基于组件化的实现方案。通过高级组件(HOC)封装页面组件实现公共布局，利用Redux管理TabBar状态，并详细展示了自定义TabBar和导航栏的代码实现。最后总结了关键点：组件化实现更自由、通过HOC解决公共组件渲染问题、Redux状态管理实现Tab切换同步。该方案解决了官方方法的局限性，提供了更灵活高效的自定义导航实现方式。
2025-10-28 11:58:08
590
原创 React 判断组件是否在视图区域的钩子函数
本文介绍了一个React自定义Hook useInView，用于检测组件是否在可视区域内。该Hook基于IntersectionObserver API实现，支持配置触发阈值(默认10%可见)、边界偏移、根元素等参数，并提供单次触发选项。使用方法简单，只需将返回的ref绑定到目标元素，即可通过isInView状态判断可见性。适用于懒加载、动画过渡等场景
2025-09-17 11:32:05
218
原创 React state在setInterval里未获取最新值的问题
React中在setInterval/setTimeout内使用setState时会出现状态值过时问题，这是由闭包导致的。解决方案有两种：1)使用函数式更新setCount(prev=>prev+1)获取最新状态；2)通过useRef保存状态值，在useEffect中同步更新ref.current，在定时器中通过ref获取最新值。这两种方法都能有效解决定时器中状态更新不及时的问题。
2025-09-08 10:37:10
283
原创 前端 下载后端返回的二进制excel数据
前端下载Excel文件方案：通过创建隐藏的a标签，将后端返回的二进制数据转换为Blob对象，设置type为application/vnd.ms-excel，生成下载链接后模拟点击触发下载。自动生成包含日期时间戳的文件名，下载完成后移除创建的DOM元素。该方法无需依赖第三方库，兼容性好，适用于各种浏览器环境下的Excel文件下载需求。
2025-08-20 11:17:37
330
原创 Taro 安全区域
针对顶部刘海区和底部小黑条两个常见问题，推荐使用Taro.getSystemInfoSync()方法获取设备信息。顶部通过safeAera.top获取刘海高度设置paddingTop，底部通过计算screenHeight与safeAera.bottom的差值确定小黑条区域。该方案兼容性好，能有效避免内容被遮挡的问题。
2025-05-21 16:36:43
1026
原创 Taro Error: chunk common [mini-css-extract-plugin]
在Taro项目中，编译时可能会遇到mini-css-extract-plugin插件抛出的CSS顺序冲突警告。这种警告通常是由于项目中不同组件引用的CSS文件顺序不一致导致的。解决方案：1、将示例中 1、2 两个引用的顺序保持一致即可编译成功。2、直接修改/config/index.ts的配置。
2025-05-21 14:28:06
1043
原创 taro 小程序 CoverImage Image src无法显示图片的问题
[渲染层网络层错误] Failed to load local image resource /assets/icon/message.png the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)
2025-05-20 14:27:06
722
原创 TaroUI AtInput等组件无法正常使用的解决方案
taroUI AtInput 微信开发者工具打印警告 WXMLRT_$gwx:./base.wxml:template:180:18: Template `tmpl_0_35` not found.
2025-05-14 10:43:50
492
2
原创 Antd Upload组件连续回车会多次触发文件夹弹窗的bug修复
思路就是禁用enter快捷键，让upload组件的enter触发失效，这样就可以规避掉这个问题。刚又到Antd官网测试一下这个bug，依然存在。
2025-04-30 18:51:22
330
原创 Springboot 手搓 后端 滑块验证码生成
2、验证码生成服务，生成唯一的标识uuid（可考虑雪花算法生成），将生成图片生成后得到的位置信息即x（非登高拼图x和y）记录到缓存中，建议使用redis存储，即使分布式也能使用；1、后端需要生成对应的两个图片（拼图图片和拼图背景图片，图片内存尽量小一点）和对应位置（x和y, 等高拼图只需要记录x即可）；通过 圆的标准方程 (x-a)²+(y-b)²=r²,标识圆心（a,b）,半径为r的圆，>=的在外侧，<的内侧。接下来继续手搓旋转验证码前后端。
2025-04-25 19:16:38
2173
原创 前端 Overflow hidden与auto切换时页面右移的问题解决 Antd Drawer打开关闭时位置偏移的问题的解决
一的解决方案也是二的解决方案，通过查看Antd Drawer打开时的body样式，我们可以发现，body在Antd Drawer打开时被Antd设置了样式，即“width: calc(100% - 滚动条宽度)”，这就是发生偏移的问题所在，我们只需要确保打开时body的宽度是我们预期的宽度即可解决该问题。这里我们获取到页面全局的滚动条宽度，再将页面宽度设置成一个定值，在条件切换的状态下，页面就不会发生位置变化了。在通过js切换页面全局滚动条状态时，我发现页面随着滚动条的消失与重现发生了位置变化。
2025-03-28 15:34:21
540
原创 ReactNative react-devtools 夜神模拟器连调
这里选择5.3.1版本，因为高版本可能与夜神模拟器无法联动，导致部分功能无法正常使用。在expo程序里点击这里刷新，开启程序页面。在模拟器里，点击侧边“
2025-01-28 14:00:11
1033
原创 Webstorm 配置Eslint ESLint: TypeError: this.libOptions.parse is not a function
Webstorm 配置Eslint ESLint: TypeError: this.libOptions.parse is not a function 解决办法：把 {**/*,*}.{js,ts,jsx,tsx,html,vue}换成 {**/*,*}.(js,ts,jsx,tsx,html,vue)
2025-01-11 23:31:26
334
原创 git 常用命令和本地合并解决冲突
最近，使用mac电脑，无法直接使用小乌龟进行可视化操作，现在记录一些一些常用命令。如果本地没有对应分支，可以使用上面checkout的命令来获取对应分支。
2025-01-05 15:18:13
537
原创 微前端Webpack集成Vite子应用避坑指南
微前端Webpack集成Vite子应用避坑指南。vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件保留vite构建es模块的优势一键配置，不影响已有的vite配置支持vite开发环境问题描述：子应用有多个root.render页面，用于处理不同的渲染逻辑，直接访问子应用的这些页面，一切正常；但在父应用中访问某些页面时，页面找不到了。经过控制台打印检查，发现子应用根本没有走自定义render页的逻辑，连自定义html里script module也未使用。
2024-12-31 11:28:24
3614
原创 Graph @antv/g6 数据刷新导致的位置和缩放比例问题解决
小伙伴写了个功能，每10s刷新一次页面数据，对graph进行重新渲染，但不巧的是，每次刷新数据graph都会回到初始位置。百度上对此记录也很少，查阅官方文档，发现官方文档的一些方法在当前版本中根本就不存在。于是，我在查阅Graph源码后，找到了如下解决方案。在graph销毁前获取当前graph的zoom和缩放为1的position, 之后，在下次render时先设置缩放为1的position, 最后设置zoom，问题就解决了。3、graph每次渲染时，设置graph上次的状态。
2024-12-17 10:30:11
1044
原创 Nextjs 前端设置正向代理 解决 跨域问题
这样配置以后，每次发送请求给“/api/”就会被直接代理到对应域名的地址，而不会出现跨域问题。/api/data 会代理到 域名/api/data 路径下。
2024-12-01 19:53:14
1242
原创 TailwindCss 总结
Width - TailwindCSS中文文档 | TailwindCSS中文网Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。简单的讲就是，我们可以通过直接编辑class里的类名来直接实现想要的效果。
2024-11-26 20:36:02
857
原创 ReactNative TypeError [ERR_INVALID_CHAR]: Invalid character in header content [“X-React-Native-Proje
react native 异常：TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["X-React-Native-Project-Root"] 检查你的reactNative项目目录路径是否有中文或特殊字符，这是报错的原因。确保项目目录路径没有中文或特殊字符，问题解决！
2024-11-22 21:35:18
612
原创 前端框架 react 性能优化
性能优化三部曲：1、寻找项目中性能损耗严重的子树；2、在子树的根节点使用性能优化API；3、子树中运用变与不变分离原则。总结到此，相信你已经掌握了性能优化的精髓。
2024-11-21 20:54:12
1523
2
原创 前端 px、rpx、em、rem、vh、vw计量单位的区别
这里是视窗指的是浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight 大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。2、随着 rem 在众多的浏览器都得到支持，有需要考虑到对多设备，多分辨率的自适应，无疑这时候 rem 是最合适的（如：移动端的开发）。3、在响应式布局中，页面中的所有元素都使用额 em 单位值，em 是一个相对的大小，默认情况下 1em=16px。2、1vh等于视口高度的1%，1vw等于视口宽度的1%。
2024-11-19 10:55:30
1673
原创 前端 JS 浅拷贝与深拷贝
return res} else {age: 18,fn() {obj.fn()obj2.fn()打印：可以看到深拷贝成功了，函数也深拷贝成功了。1、如果是基本数据类型，js都是采用深拷贝的，数据之间不会有任何影响；2、可以通过解构重构或Object.assgin方法来实现浅拷贝；3、深拷贝可以使用实验中的深拷贝递归函数来实现，对于一些没有函数的对象可以实验JSON.parse(JSON.stringify()) 的方法来快速实现深拷贝。总结到此！
2024-11-18 16:26:52
1331
原创 前端框架 详解遍历数组为何需要加Key
key的作用相当于一个ID，只是无法在页面中查看，当设置key以后，在更新渲染比较元素时，就会比较相同key的元素，而不是按照顺序进行比较，在渲染一个列表时，通常给列表每个元素设置一个唯一的key来解决上述问题（这个key在当前列表中唯一即可）
2024-11-17 20:20:00
807
原创 前端 JS 实用操作总结
不同在于，find查找到一个选项后，就立即返回停止执行了。这个方法可以用来整合数组，他可以对数组中的值进行计算，最终数组中的所有元素合并为一个值。（4）箭头函数的this，一旦确定后是无法更改的，无法使用call、bind、apply来修改this指向。打印：可以得出箭头函数并没有arguments实参，直接写肯定报错。打印：在严格模式下普通函数在全局中的this为undefined。将obj里的值在新对象中展开，相当于浅拷贝。prev: 上一次运算结果。打印：可以得出：箭头函数。特点：传统函数的简写。
2024-11-15 21:27:24
672
原创 前端 JS面向对象 继承
直接通过class来标注，并且构造函数同一为constructor(), 允许静态方法，添加extends关键字进行继承。这里我不难看出，第一种写法也存在一种问题，两个类型继承同一各方法时，修改的原型对象是同一各个导致一些修改上的问题。由此演进出不会影响修改的更优方案：通过构造函数来实现。
2024-11-12 11:44:56
433
空空如也
SpringCloud Sentinel Gateway Nacos
2024-09-21
SpringCloud Maven多模块项目如何导出可以正常运行的Jar包
2024-06-19
身份证实名认证除了第三方提供的付费接口，是否可以查到对应公安的身份证比对接口？
2024-05-16
Netty集群如何做到Channel共享，高并发
2023-01-09
如何保证rocketmq的服务器安全不被别人修改
2022-10-13
SpringCloud搭建Nacos集群基于Nginx,配置文件后报错，如何解决？
2022-04-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人