- 博客(29)
- 收藏
- 关注
RSS订阅
原创 开源｜Documind协同文档（接入deepseek-r1、支持实时聊天）
Documind一个支持实时聊天和接入deepseek-r1模型AI助手的协同文档编辑项目前端后端项目预览Documind 预览地址（部署于 Vercel）githubMebius1916/Documind: 一个支持实时聊天和接入deepseek-r1智能助手的协同文档编辑器如果使用有异常请挂梯子使用。
2025-02-28 21:59:05
539
原创 项目亮点万金油：自定义SSR水合保护hooks
nextjs水合错误：“水合是指 React 接收服务器渲染的 HTML，并通过附加事件处理器并将 JavaScript 生成的 DOM 与服务器渲染的 DOM 进行协调，使其变得可交互的过程。当服务器渲染的 HTML 与客户端渲染的 HTML 不匹配时，就会发生水合错误。这种情况可能发生在以下情况：服务器和客户端由于依赖浏览器特定 API（例如window）的逻辑而渲染不同的内容、在不同环境下条件渲染不同，或者外部数据获取未正确同步。
2025-03-22 17:48:33
917
原创 从 Prop Drilling 到 Context：React 状态管理的演进与抉择
redux的核心是发布订阅模式，zustand核心是观察者模式，从设计模式角度，redux比zustand多了事件总线用来派发任务，在任务量大的情况下由于发布订阅模式的中间件及事件派发会像虚拟dom一样造成一定的性能损耗，所以性能不如观察者模式，延迟也相对较高。发布订阅模式其实就是观察者模式的升级，多了一个用于派发的中间件（事件总线），发布者和订阅者不直接通信，耦合度较低；Context 依赖组件树，耦合度高，而 Zustand 独立于组件树，灵活性更高。2.难以维护（这个就不用多说了吧，可读性很差）
2025-03-16 19:18:21
507
原创 虚拟列表业务封装思路分享
公司组会上提到下拉列表元素过多的话会导致页面卡顿，而懒加载+分页的方案并不能阻止页面dom增多，所以就需要使用虚拟滚动方案。我翻看掘金和csdn上的文章后发现很多是手写虚拟滚动方案，虽然手写虚拟滚动能够实现高度定制化并做到性能优于第三方库，但是开发效率也是不可忽视的一环。引用第三方库虽然不利于极致的性能优化但是能大大提高开发效率（特别是这种复杂的功能）。
2025-03-16 00:35:40
875
原创 自定义tiptap插件
我定义了两个插件：- `font-size`：支持通过`setFontSize`设置`tiptap`编辑器字体大小，通过`unsetFontSize`重置为默认大小。- `line-height`：支持通过设置`setLineHeight`设置`tiptap`编辑器行高，通过`unsetLineHeight`重置为默认行高。
2025-03-15 23:56:25
304
原创 用tiptap搭建仿google-docs工具栏
> 本文为开发开源项目的真实开发经历，感兴趣的可以来给我的项目点个star，谢谢啦\~>> 具体博文介绍：> [开源｜Documind协同文档（接入deepseek-r1、支持实时聊天）Documind 🚀 一个支持实时聊天和接入 - 掘金](https://juejin.cn/post/7475222760130969634 "开源｜Documind协同文档（接入deepseek-r1、支持实时聊天）Documind 🚀 一个支持实时聊天和接入 - 掘金")
2025-03-15 23:54:07
387
原创 合React宝宝体质的自定义防抖hook
React 版本的防抖钩子通过 useCallback 保持函数引用稳定避免子组件无效渲染，依赖数组自动更新最新回调函数和延迟参数，集成 React 生命周期自动清理定时器，配合 TypeScript 泛型保留完整类型提示，完美适配函数组件开发模式，从根本上解决了普通防抖函数在 React 中容易产生的闭包陷阱和内存泄漏问题。以上demo都为基础版本，可以根据具体需求在demo上定制，此处就不再赘述。
2025-03-15 23:44:54
322
原创 使用tiptap快速搭建markdown-富文本编辑器
tiptap通过插件化设计实现了极致的可定制性（除了官方插件外还支持社区插件）；并且tiptap具有react的优良传统：强大的生态联动，可以和liveblocks搭配实现协同文档。通过以下代码我们可以看到我们在tiptap的不同生命周期都及时存储了editor状态。中导入相应样式（具体参考tiptap官方文档），具体扩展名在下面已加上注释。
2025-03-15 23:41:27
587
原创 只用过传统搜索方式？来试试url持久化搜索
之后我们就可以在需要使用的地方取出这个。从搜索框拿到数据后直接传给后端查询。来修改搜索内容，此处会以。然后进行之后的一系列操作。
2025-03-15 23:21:41
597
原创 真实开发踩坑：闭包捕获问题
本文为开发开源项目的真实开发经历，感兴趣的可以来给我的项目点个star，谢谢啦~具体博文介绍：开源｜Documind协同文档（接入deepseek-r1、支持实时聊天）
2025-03-01 17:55:39
392
原创 比节流防抖更优的选择（特定情况）
由以上代码可以看出明显是第一种方案的代码量少性能更优方便阅读和维护，并且删除按钮每次有且仅需要点击一次不需要多次点击，所以使用节流防抖有点“画蛇添足”，这里只是以删除按钮为例，不仅限于删除按钮情况，可在写代码之时留意一下是否“有必要”使用节流防抖函数。
2025-02-07 22:13:04
238
原创 elementPlus-button组件二次封装
这是对 Element Plus 按钮组件的封装，预设了 add/import/export/delete 四种业务按钮类型及其对应的图标样式。新增了防重复点击功能和自动 loading 状态，同时保持了对原组件属性的完整透传。采用 Vue3 + TypeScript 开发，提供完整的类型支持。
2025-01-24 17:48:07
584
原创 有没有想过云图片不是百分百可以正确加载？
我在使用cloudinary（一个云图像/视频平台）的时候发现一个潜在问题：有时候获取图片地址的时候初次获取是无法正确获取到的，必须刷新一次或多次才能正确获取到图片，但是浏览器只会加载一次图片，这就会导致图片即使存在也无法正确加载从而被备用图片替换。
2025-01-01 13:59:13
252
原创 为什么我推荐所有tailwind使用者使用cn函数
推荐在组件上编写样式的时候使用cn()，组件库：shadcn等、自己定义的组件。本质上是个处理函数，必然会对性能造成损耗，所以在简单场景我们无需使用。的主要作用就是"格式化"，让类名更加美观可读。无懈可击没有任何缺点，那我们需要仍和情况都使用。的产生是为了解决样式冲突问题。可以将条件判断语句转化为条件对象语句。，我们在调用的时候又给它赋值一个。能合并个冲突并将新值覆盖旧值。，这个时候我们就有新旧两个。就能很好的解决这个问题，以上均为最重要的特性但。就会作为一个变量传入。
2024-12-26 16:58:15
296
原创 NextJS的水合冲突A tree hydrated but some attributes of the server rendered HTML didn‘t match the client..
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up.
2024-12-16 19:58:56
527
5
原创 如何将各大平台的博客文章保存到本地
我在浏览掘金稀土上的面试八股文时觉得不够方便，就产生了将其提取成pdf放在平板上观看的想法，此文章用于分享我找到的解决方案。
2024-11-02 21:57:25
2796
原创 开源全站第一个Nextron(NextJS+electron)项目--NextTalk：一款集成chatgpt的实时聊天工具
开源一个基于Nextron(NextJS+Electron)的桌面端实时聊天工具。
2024-11-01 19:37:36
1964
5
原创 可能是NextJs(使用ssr、api route)打包成桌面端(nextron、electron、tauri)的最佳解决方式
在我使用nextron（next+electron）写了一个项目后打包发现nextron等一系列桌面端框架在生产环境是不支持next的ssr也就是api route功能的这就导致我非常难受，耗费了小半个月结果告诉我只能使用NextJs的单页面模式也就是静态导出模式（因为在开发环境是支持ssr/api route的就导致我以为可以使用）这让我无法理解nextron的意义，我认为api route是NextJs作为全栈框架非常重要的功能，阉割后只能算作react plus，于是不甘心的我就开始在网上查找解决方案
2024-10-20 17:03:45
3246
原创 如何将csdn文章导出为pdf
在csdn上浏览文章的时候我发现有的文章支持pdf导出，但是有的文章不支持pdf导出，为了解决能将csdn上所有文章都能以pdf格式导出遂作此文。
2024-10-11 13:39:57
4471
2
原创 NextJs-react开发者的全栈最佳选择(从0-1的react全栈入门指南)
该指南面向vue转react的同学和想学习react的同学，本指南本质上是我个人的学习随笔记录，但也可以用作学习参考。
2024-09-06 02:09:52
6961
1
原创 React错误:无法在‘node’上执行‘insertBefore‘：要在其前插入新节点的节点不是此节点的子节点
然后我就把插件关掉后刷新页面，结果你猜怎么着？觉得很离谱遂做此文章。
2024-08-21 23:32:24
3619
5
原创 生成自己的网易云音乐接口--音乐插件功能
ps：2021-6-23起”我喜欢的音乐”歌单不再受支持。如有需求，请创建一个公开的歌单，并将“我喜欢的音乐”中的歌曲移入。用途：该接口用于个人博客添加音乐功能，详情可以参加我的个人博客：https://mebius.fun/***上述API接入了。网易云音乐/QQ音乐。***付费歌曲可播放。
2024-07-16 21:27:25
1217
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人