![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 73
QC班长
CSDN程序员学院讲师,CSDN内容合伙人,全栈领域优质创作者,高级瑜伽导师-阿斯汤加瑜伽练习者,透过IT看世界!
展开
-
前后端性能优化实践(含Java代码部分、数据库部分、React前端部分)
性能优化某种意义上是对资源取舍利用的问题。通常是就是空间和时间的互换与取舍。以下是我收集到的常见的6种互换手段。1、索引索引的原理是拿额外的存储空间换取查询时间,增加了写入数据的开销,但使读取数据的时间复杂度一般从O(n)降低到O(logn)甚至O(1)。在数据集比较大时,不用索引就像从一本没有目录而且内容乱序的新华字典查一个字,得一页一页全翻一遍才能找到;用索引之后,就像用拼音先在目录中先找到要查到字在哪一页,直接翻过去就行了。书籍的目录是典型的树状结构。2、缓存。原创 2023-11-24 13:40:11 · 1064 阅读 · 0 评论 -
使用html2canvas转换table为图片时合并单元格rowspan失效,无边框显示问题解决(React实现)
(对于使用了第三方表单的Table组件)-如果用的组件table,tr的背景色也是组件设置的。所以tr样式用这个覆盖background-color: transparent;,再设置单元格的background-color。为tr设置了背景色,然后td设置了rowspan,设置了rowspan的单元格就会出现边框不显示的问题。最近使用 html2canvas导出Table表单为图片,但是转换出的图片被合并的单元格没有显示边框。把tr的背景色设置为透明,在td里设置背景色。最后就正常显示了,可以打印了。原创 2023-11-17 10:16:14 · 2496 阅读 · 1 评论 -
React动态生成二维码和毫米(mm)单位转像素(px)单位
1. 首先,需要确定当前屏幕的像素密度(pixel density)。常见的像素密度是每英寸像素数(PPI)为 96。可以根据实际情况进行调整。所以,在代码中将毫米转换为像素,可以使用上述公式进行计算。将这个转换过程封装成一个过滤器或者自定义方法,以便在模板中直接调用和使用。使用传入URL就行,size可自己定。原创 2023-11-07 22:21:08 · 992 阅读 · 0 评论 -
React的UmiJS搭建的项目集成海康威视h5player播放插件H5视频播放器开发包 V2.1.2
其中集成的难点是在于官方开发包的引入,因为下载下来的demo是用HTML写的,直接可以在Head标签中导入,所以没什么问题,但UmiJS框架搭建的组件化项目直接就没有了HTML文件,所以得找到额外script脚本引入的地方,不同框架搭建的项目,建议去看官方文档。那里是最直接的说明书。下载下来后,核心需要的包如下,其中xxx.wasm文件是官方使用C++编写的WebAssembly文件,是基于堆栈的虚拟机的二进制指令格式,一种低级汇编语言,旨在非常接近已编译的机器代码,并且非常接近本机性能。原创 2023-07-28 22:36:53 · 4100 阅读 · 9 评论 -
Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题)
大屏项目显示云南省3D的地图,可拖拽缩放、地图打点、点击图标弹框等等功能。原创 2023-06-13 16:58:07 · 7849 阅读 · 4 评论 -
基于React的微前端项目构建时Node V8内存溢出问题解决(Ineffective mark-compacts near heap limit Allocation failed)
最近在写前端的React项目,项目用的是阿里飞冰的微前端解决方案,面向大型系统的微前端解决方案,前端的每个模块都拆分成了微模块。编译好后在集成到主应用中。原创 2023-04-21 15:06:50 · 1059 阅读 · 1 评论 -
JS中的some()、every() 、 reduce()方法
一、some() 方法用于检测数组中的元素是否满足指定条件(函数提供)原创 2023-04-18 17:00:31 · 2092 阅读 · 0 评论 -
MacOS系统启动React前端项目时报错Error: EMFILE: too many open files, open解决方法
2、Too many open files是Linux、MacOS系统中常见的错误,从字面意思上看就是说程序打开的文件数过多,不过这里的files不单是文件的意思,也包括打开的通讯链接(比如socket),正在监听的端口等等,所以有时候也可以叫做句柄(handle),这个错误通常也可以叫做句柄数超出系统限制。另外一种情况就是我们的程序存在文件句柄使用完成之后没有正常的关闭的情况,通常是网络连接没关闭,文件打开没关闭等等,这时就需要我们修复程序中的bug,确保打开的文件最后都会关闭,网络连接也会关闭。原创 2023-04-18 16:21:50 · 3109 阅读 · 0 评论 -
React Native 0.71.1版本中使用react-native-elements报错: Unrecognized font family ‘Material Icons‘解决方法
最近在使用React Native开发APP,使用到了react-native-elements的UI,其中用到了图标库,iOS端启动报错Unrecognized font family 'Material Icons',安卓端不报错,但图标不选显示。将 node-modeles\react-native-vector-icons\Fonts目录下的文件复制到项目andriod\app\src\main\assets\fonts 目录下,如果没有相应的文件夹的话,自己创建一个即可。原创 2023-02-09 21:47:20 · 412 阅读 · 0 评论 -
macOS端React的项目WebPack热更新(HMR)失效问题分析及解决,原因竟是Windows文件系统不区分大小写导致
最近做的项目是一个使用UmiJS搭建的React的前端老项目,项目是上一个开发团队遗留下来的老项目,我们接着在原来的基础上开发。团队成员中有的是Windows电脑,有的是Mac电脑,所以存在规范不统一的情况。原创 2022-11-30 10:03:26 · 1212 阅读 · 0 评论 -
JavaScript实现React实现网页转换成图片截屏下载
最近有项目的需求需要把网站内HTML内容转换成图片保存下载,找了一圈发现一个不错的插件HTML-to-image,npm 包地址:Html-to-image ,该插件的原理是:SVG的foreignObject标签可以包裹任意的html内容。那么,为了渲染一个节点,主要进行了以下步骤原创 2022-11-13 21:52:57 · 1669 阅读 · 0 评论 -
React报错Warning: This synthetic event is reused for performance reasons. If you‘re seeing this, 解决方法
使用React的NavLink标签作为菜单列表,点击菜单列表按钮,动态更换菜单名称。React报错Warning: This synthetic event is reused for performance reasons. If you're seeing this, 解决方法原创 2022-10-08 10:20:30 · 3143 阅读 · 0 评论 -
React封装APP端弹框筛选组件带div蒙层遮罩层
先看下效果:点击筛选,弹出框显示筛选面板,再点击确定关闭面板,取消遮罩层出。第三方依赖组件:antd-mobile、antd-mobile-icons。index.less样式代码。index.tsx代码。原创 2022-09-28 17:09:34 · 753 阅读 · 0 评论 -
React AntV/G2Plot环形图Pie添加点击事件,即点击图环触发获取相关数据。
/ 图表的点击事情,可参考文档添加其它事件,https://charts.ant.design/zh/examples/pie/donut#basic。* @param plot 在 Plot 上通过 on 绑定事件、off 移除绑定事件。1、添加相关依赖,引入AntV/G2Plot图表组件。原创 2022-09-26 10:59:27 · 2650 阅读 · 1 评论