React.js
文章平均质量分 83
c.
这个作者很懒,什么都没留下…
展开
-
使用react-grid-layout和react-full-screen实现一个可自定义和全屏展示的dashboard页面
接下来我们需要做的功能如下:1. 我们可以全局锁定和解锁dashboard中的图表组件,让其不允许拖动和缩放。2. 懒加载对应的图表组件显示到dashboard中3. 实时保存当前界面的布局到localstorage,以便下次进入页面可以展示上一次编辑的dashboard布局4. 实现dashboard全屏展示,这里会用到`react-full-screen`原创 2022-12-06 17:39:12 · 2133 阅读 · 2 评论 -
使用react-sizeme解决react-grid-layout中侧栏(抽屉)展开或隐藏时不会自适应容器大小的问题
当我们侧栏(抽屉)移动时并不会自动帮我们调整`react-grid-layout`中元素的占位,也就是在最右边我们可以看到,当侧栏(抽屉)隐藏的时候,最右边是有空白的,并不会自适应填充。原创 2022-11-29 21:04:16 · 1462 阅读 · 9 评论 -
使用react-grid-layout和echarts-for-react实现一个支持拖拽的自定义响应式dashboard页面
在前端工作中,我们会经常遇到自定义dashboard页这样的需求。然后我想做一个能够让用户可以在面板上自由的拖拽,固定(不允许拖拽),拖拉改变大小、新增,删除组件。组件可以是各种echarts图形,也可是各种数据表格。通过各个组件的拖拽组合,从而让用户自定义需要的dashboard页。我们直接先来看最终的效果。原创 2022-11-28 20:07:07 · 2687 阅读 · 1 评论 -
使用react-draggable和react-resizable实现Ant Design Modal的拖动和拖拽改变宽度
Ant Design 提供的Modal是不支持拖动还有侧边拖拽改变宽度的,基于这一点我们需要自定义一个我们自己的Modal组件,来实现拖动和拖拽改变宽度。还有一点需要注意的是,需要设置一下modal最小的宽度,防止拖拽改变宽度太小导致modal里面的内容样式错乱。包裹一下就可以了,网上案例很多,不具体讲。唯一比较特别的是,如果你直接包裹在。还有一点需要注意的是拖动的时候需要设置一下不能超出当前可视窗口。实现拖拽改变宽度也不难,也是引入。外面是无法实现拖拽的,而是要在。来实现modal的拖动,使用。原创 2022-11-21 20:24:09 · 4233 阅读 · 0 评论 -
react-window构造的虚拟列表使用react-resizable动态调整宽度和使用react-drag-listview拖拽变换列位置的问题
构造虚拟列表来解决大型的数据列表渲染的性能问题。虚拟列表的优点是不用全部加载出所有的DOM节点, 而是按需显示思路的一种实现,即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。然而在实际开发中发现,对于普通Table(非虚拟列表)是生效的,能够动态的改变列的宽度和位置,然而对虚拟列表却无法变化。会缓存列表的行高和列框, 所以当我们调整了列的宽度,但是却没有清楚掉这些缓存,就会导致虚拟列表不会渲染出来最新的样式。去动态调整table(虚拟列表)的列宽度,还有使用。原创 2022-11-21 20:06:27 · 3089 阅读 · 1 评论 -
前端错误监控的简单设计与实现
为了让我们的开发人员能够发现用户在前端操作出现的一些前端错误,能够尽早发现和定位问题。我们暂定是使用邮件的形式来通知我们的开发人员。而且我们并不要求所有的前端错误都能够实时全量的通知给开发人员,因为当前端有问题的时候,可能前端报错特别多,会导致上报的数据会很多,从而造成发送很多邮件,而实际上我们只是想关心发生了什么错误,而不是关心发生了多少错误。所以我们会对监控上班和邮件通知进行限制,保证不会有瞬间过多的监控数据请求到后端。原创 2022-10-12 16:56:17 · 953 阅读 · 0 评论 -
React 错误处理和日志记录的思考与设计
在平时的工作,js报错是比较常见的一个情景,当出现错误的时候,用户上报问题我们往往需要去定位问题的原因,但是因为错误存在于用户的客户端,所以我们没法很好的拿到错误的信息,所以如果当我们前端js出现异常的时候能及时上报的话,那我们的问题就比较好解决了。我们先不考虑使用现成的平台,因为我们想要的功能比较简单,而且部署一套监控平台公司不一定允许,所以可以考虑在自己项目中进行处理,不引用第三方的平台。,网上比较多推荐的是:sentry,它对异常数据的收集和分析更加完善,如果公司有条件私有化部署的话比较推荐使用。原创 2022-09-07 18:00:00 · 1200 阅读 · 0 评论 -
React.js 初级入门学习, 你学废了吗?
文章目录React.js 初级入门教程, 你学废了吗?React 简介React学习路线React与Vue的对比组件化方面开发团队方面更多对比为什么要用ReactReact 特点React中的核心概念虚拟DOM (Virtual DOM)什么是DOM?什么是VituralDOM?为什么需要VituralDOM?简单总结虚拟DOM(Vitural DOM)的处理方式简单总结虚拟DOMDiff算法了解...原创 2020-05-05 11:53:55 · 559 阅读 · 0 评论