- 博客(15)
- 收藏
- 关注
RSS订阅原创 解决Next.js服务端渲染时出现Hydration(水合)错误
错误信息（hydration-error-info.js:67 Warning: Expected server HTML to contain a matching in .）忽略错误依然可以正常运行，但是每次刷新后都会显示这个错误。导致这个错误的原因是因为我们在页面上显示的数据没有使用useState。解决就是直接使用useState就不会报错了。
2025-01-14 15:37:43
683
原创 react使用useRef模仿抖音标题里面添加标签内容
这一过程提醒我们，在开发中，细致入微的测试是必不可少的。这是抖音的发布页面，此篇文章目的就是为了模仿input输入特定的文本为标签，并且显示不同的样式，：通过修改正则表达式，组件支持中文字符作为标签的一部分，使其更加灵活和适应多语言环境。：标签的样式可根据其类型进行不同的设置，例如使用绿色显示标签，黑色显示普通文本。：用户输入文本后，组件会实时解析输入的内容，并根据规则将特定格式的文本（如以。开头的文本时，组件会将其解析为标签，并使用不同的样式进行显示。开头的标签）动态生成对应的。
2024-10-24 16:12:25
257
原创 优化 React 组件性能：使用 React.memo 避免不必要的重新渲染
使用React.memo来优化 React 组件的性能是一种有效的方法。它可以帮助我们避免不必要的渲染，提升用户体验。在设计组件时，合理地管理状态和渲染依赖，将为应用的流畅度带来显著的提升。
2024-10-17 10:30:32
236
原创 深入理解 React 组件中的变量作用域与状态管理：避免重复初始化问题
这种方式可以避免受组件的重新渲染影响，保证参数不会被初始化。但问题是，一旦将变量定义在组件外部，它的状态和组件的生命周期就没有了直接的联系，可能会引发其他管理上的复杂性。是 React 提供的一个可以跨渲染周期保存状态的 Hook，且它的变化不会触发组件的重新渲染。的值在每次渲染中都会被保留，而不会重新初始化。然而，这并不是一个长久之计，因为实际开发中，状态的变化是不可避免的。这着实让我百思不得其解，这两个函数在同一组件作用域下为什么会有不同的打印结果！触发了状态的变化，导致组件的作用域代码重新执行。
2024-10-14 10:33:10
409
原创 next项目打包踩坑antd组件的message导致document未定义？
由于next项目是服务端渲染，所以它的某些功能在本地运行时没问题，但打包上线是不被允许的。看报错信息打包是预编译已经完成，但是所有的问题都指向antd的message组件在 Next.js 中，antd的message组件（以及其他依赖document或window的浏览器特定 API 的组件）确实不能在服务端渲染（SSR）中使用。这是因为服务端渲染的代码运行在 Node.js 环境中，那里并没有document和window对象，所以任何依赖这些对象的代码都会引发错误。
2024-09-18 17:39:05
612
原创 Next.js项目打包踩坑
今天项目终于到了打包上传的时候了，由于是使用TS语言开发的项目，整体npm run build的过程还算顺利，几个any上去总算是打包成功。因为这是我第一次打包上传项目，还是挺值得我记录的。它的大小绝对是不正常的。这就是对打包结果的可视化分析，我们可以看到最大的文件是一个全国地区的地图的json文件，那是参与echarts地图的一个插件的文件，但也只有200多kb完全正常完全可以接受。接下来我就只能对.next文件分析了，经过层层剖析，终于发现，最大的那个文件占了差不多90%的体积，只能是它出问题了。
2024-09-06 16:14:31
2771
原创 阿里云矢量图标库的使用
虽然不少公司都会有自己的前端ui工程师设计图标，各类ui库也会有自己的图标库，但如果你是个人开发或者是学校的同学，再或者你们没有ui设计图标，那么你就能运用到我的方案。它介绍了三种使用方式。我一般选用font-class的方式使用，当然官方推荐的还是第三种使用svg的方式。好的这次分享就是这样，这样的好处首先不用安装包，其次它的可选择的图标是真的很丰富，最重要的是它的图标真的很精美且免费！注意的，每个使用的标签都应该有两个类名且第一个是iconfont。然后我们就可以在项目的任何页面使用自己引入的图标了。
2024-08-14 14:58:20
1902
1
原创 Next.js全局状态管理：zustand。以及cookie和seesion的实用剖析。
但是当我想从cookie转回来时它变成了”%7B%22userId%22%3A%229%22%2C%22username%22%3A%2218285873023%22%2C%22password%22%3A%22123456%22%2C%22phone%22%3A%2218285873023%22%7D“这样的ASCII 字符，JSON.parse处理后是null。废话多了点，但也算是我的经验了吧，我的目的是记录一边后以后就不会再焦头烂额了。我比较喜欢边写代码，便给出注释，所以不懂的看注释，我就不再复述。
2024-08-13 17:54:08
2151
2
原创 解决antd-Upload组件上传后没有预览图标？
我以为它是异步的没问题，但结果它确实是执行了三遍，我跟着debugger走了一圈，发现它是整个页面组件都执行了三遍，所以打印出三个1，ok没问题！随后发现它是否显示，是与status状态有关，也就是它是异步的，但是渲染是同步的，这是我一开始的做法，可以看到在upload组件上我使用了 onPreview={handlePreview} 回调函数，最后改成这样，问题解决，但是有个问题，万一上传不成功呢。我会持续关注这个功能的！那就与组件没有问题，然后我打印了下上传的组件，发现了问题所在。
2024-08-08 18:02:47
910
原创 Next.js的next.config.ts与next.config.mjs的区别
最近在做Next.js项目的时候，按照react的流程给它做一个跨域的请求封装，本以为会像传统React项目那样顺风顺水！！接下来我将以我做配置代理的例子作介绍。希望大家看完文章后，避开我所遇上的问题。先说结论：Next.js 默认不支持配置文件，只支持和。因此，要在 TypeScript 项目中使用配置文件，需要使用或，并在其中导入 TypeScript 代码或使用 JavaScript 编写配置。
2024-08-07 17:25:33
1102
原创 antd+React.js实现登陆页面，登陆注册页面
我认为这个页面的特色还是有的，使用一个tabs标签实现两个点击按钮实现了三个和功能页面转换。其中图形验证码在业务上实际是由后端生成的。今天制作登陆界面，本来想找开原的代码复制粘贴，但奈何网友们是在太过吝啬。找了半天，不如我来做这个开源。代码如下（登陆界面层级都比较分明，故不再做过多解释）如果你认为它还能更好，请联系我。代码的显示效果是这样的。
2024-08-05 17:17:12
459
原创 Next.js学习路线
Next.js 是一个基于 React 的开源框架，可帮助开发人员构建服务器端呈现的 React 应用程序。React和 Next.js 之间的主要区别在于它们处理路由的方式。React 使用客户端路由，这意味着页面转换完全在客户端使用 JavaScript 处理。相比之下，Next.js 提供服务器端路由，这意味着服务器处理路由并将预渲染的页面发送给客户端，从而实现更快的页面加载和更好的 SEO。Next.js 还提供其他功能，如自动代码拆分、静态站点生成和动态导入。
2024-08-02 11:24:55
1396
原创 react多表格页面懒加载
打开调试窗口debuge调试半天，后来发现页面跳转是没问题，问题就出现在渲染上了，果然一看吓一跳，他一次渲染的页面的高度就达到了56千的像素，怪不得会卡，发现问题：页面一次渲染太多内容了。事实上这样解决还是不够雅观，因为我有太多的页面组件了，每个组件都这样被相同的工具给包裹起来很不自在，如果你觉得有更好更雅观的解决方案请和我一起讨论。这样路由跳转就不会太卡顿了，后来页面出现卡顿了，我怪罪于react的性能不好（因为我在一个页面里面做了五六七八张表格，即使没有数据，光渲染也会卡奔溃的。
2024-07-17 14:31:39
241
原创 封装useEffect，实现并发请求数据图实时响应
首先我需要取到redux状态参数，然后定义页面状态，然后在根据参数获取数据再更改状态。而且好像依赖的参数一变动所有的数据重新请求？(这样问题可以解决，但是正如我刚才所说，这个会是个多场景业务，，业务问题得以解决，但是代码重复会特别多。依然需要取到redux的状态，但是后续就不会有过多的定义修改操作了。遇到这样一种工作场景：当一个页面需要依赖多个请求并发处理时，而显示数据需要实时变动（根据传入的参数变动而实时更改）仔细想想可不可以封装一个请求函数，传入一个请求api和参数，参数变化是自动执行函数？
2024-07-17 14:06:44
380
原创 echarts-for-react实现国内各省的地图切换
没接触echarts-for-react之前一直使用的是echarts封装画图，但是突然接到一个需要显示各省的地图切换，查遍了百度也没发现类似的案例。既然我们有画地图的工具ehcarts和各省的地标位置数据那么应该是可以实现的，理论可行，开始实践。这里我还添加了antd的级联选择组件，是地图的显示精确到了区县地区。页面用到的插件为echarts-for-react，并非只有echarts。其中代码注释已经很详细了，希望能帮助到你！然后我们需要动态的获取地图信息。首先我们获取到各省的地表数据。
2024-07-17 12:01:33
323
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人