React组件:拖拽布局Dragact v0.1.6 发布
仓库地址:Dragact爽滑的拖拽组件
大家好,新年已经过去,大家又投入了繁忙的工作当中,由于我在国外,因此压根儿没有休息...
少说废话,上周一周的时间里,我陆陆续续的为Dragact
组件进行了一系列更新,基本上做了一个大重构,而且做了一小部分性能优化。
新特性1:性能提升
通过对React 组件渲染的优化以及内部算法的优化,把大量的遍历和渲染都省掉。
优化前6s的性能
优化后6s的性能
大家可以看到,同样是跑6s,我们脚本计算时间,渲染时间,浏览器painting时间都有了很大幅度的提升。
新特性2:不一样的挂件渲染Api
依赖注入式的挂件(widget)
可以从最简单的例子看出,我们渲染子组件的方式和以往有些不同。以往的React组件书写方式,采用的是类似以下写法:
<Dragact
col={8}
width={800}
margin={[5, 5]}
rowHeight={40}
className='plant-layout'
>
<div key={0} data-set={{ GridX: 0, GridY: 0, w: 4, h: 2 }} className='layout-child'>0</div>
<div key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className='layout-child'>1</div>
<div key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className='layout-child'>2</div>
</Dragact>
这么做当然可以,但是有几个问题:
- 子组件非常的丑,需要我们定义一大堆东西
- 很难监听到子组件的事件,比如是否拖拽等
- 如果有大量的数据时,就必须写对数组写一个map函数,类似:layout.map(item=>item); 来帮助渲染数组
为了解决这个问题,我将子组件的渲染方式进行高度抽象成为一个构造器,简单来说就是以下的形式:
<Dragact
layout={fakeData}//必填项
....
>
{(item, isDragging) => {
return <div style={blockStyle}>
{isDragging ? '正在抓取' : '停放'}
</div>
}}
</Dragact>,
现在,我们子元素渲染变成一个小小的构造函数,第一个入参是您输入数据的每一项,第二个参数就是isDragging,状态监听参数。
这么做,轻易的实现了,组件漂亮,不用写map函数,不用写key,同时更容易监听每一个组件的拖拽状态isDragging.
更多的依赖注入思想以及好处,请看我的知乎问答:知乎,方正的回答:如何设计一款组件库
最后放一张图动图:
非常轻松的追踪到了是否拖拽
新特性3:拖拽把手
通过全新的api,现在dragact能够轻松的实现,全自定义的拖拽把手
点击拖拽把手就能移动,不点击?绝对不能移动
新特性4:数据驱动的模式
视图的改变就是数据的改变
这是React给我们的一个启示,Dragact组件通过对数据的处理,达到了数据变化即视图变化。
这么做的好处就是我们可以轻松的将布局信息记录在服务器的数据库中,下一次拿到数据的时候,就可以轻松的恢复原来的视图位置。
通过获取Dragact组件的实例,我提供了一个api getLayout():DragactLayout;,用于获取当前的布局信息。
在这个例子:Drag例子中,我们通过调用getLayout() api将数据存储在本地浏览器中,当下次访问的时候,我们就可以恢复之前所摆放的布局。
新特性5:全新的用例,支持移动端
为了更好的观看体验,我为移动端的用户们设计了一个用例页面,现在可以在手机上玩耍啦!
手机端例子:Drag例子中
手机端的界面
下一个版本:
- 支持自动滚动,当拖拽鼠标到达浏览器边缘的时候,视图能够自动滚动
- 列表布局,现在是全局布局,下个版本中考虑加入新的列表布局
- 拖拽把手的高街组件,目前拖拽把手实现有点点蛋疼,在下个版本中,我将进行着重修改
感谢大家支持,喜欢的给一点✨!~
React组件:拖拽布局Dragact v0.1.6 发布的更多相关文章
- React 实现拖拽功能
实现效果:(可戳 https://codepen.io/wenr/pen/EGEQxp 查看) 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感 ...
- 使用TypeScript给Vue 3.0写一个指令实现组件拖拽
最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考 ...
- react 可拖拽改变位置和大小的弹窗
一 目标 最近,项目上需要一个可以弹出一个可以移动位置和改变大小的窗口,来显示一下对当前页面的一个辅助内容 二 思路 1.之前写过一个antd modal的可移动弹窗但是毕竟不如自己写的更定制化,比如 ...
- React拖拽组件Dragact V0.1.7:教你优化React组件性能与手感
仓库地址:Dragact手感丝滑的拖拽布局组件 预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dr ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- Vue拖拽组件列表实现动态页面配置
需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除. 根据这个需求我 ...
- jqueryui sortable拖拽后保存位置
jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var a ...
- React造轮子:拖拽排序组件「Dragact」
先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...
- 强大的拖拽组件:React DnD 的使用
强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读 · 读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...
随机推荐
- alertmanager + federate - Prometheus outside k8s cluster + 总体架构图 对接企业微信告警 + curl alertmanager to send alert
1.实验的架构 2.k8s 集群外的Prometheus的配置文件 [root@do1cloud03 prometheus]# cat prometheus.yml |egrep -v '#' glo ...
- 添加SSH keys到github帐号
使用git clone命令从github上同步github上的代码库时,如果使用SSH链接(如我自己的esesgrid项目:git@github.com:hmilycc/esesgrid.git),而 ...
- 小程序api使用报错
小程序连接api报错: 如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目,操作路径:“项目-域名信息” 解决办法如下: 点击设置—-项目设置—勾选如下选项即可解决
- 【Java学习】类、对象、实例—类是对象的抽象,对象是类的实例
类.对象.实例的关系是什么,如果不能很好的理解什么是类什么是对象就无法讲清楚, 类:某种事物与另一种事物具有相似性,比如哈士奇和泰迪,我们发现他们有一些相似的特性和行为,在生物学上,他们都属于“狗”, ...
- 第一次入坑docker
直接进入主题 1.首先获取git clone项目 2.创建镜像:docker build -t="docker" .(注意千万不要忘了.) 3.列出镜像:docker images ...
- T100——接口代码记录,jsonArray和json
{<section id="cs_t1client.description" >} #應用 a00 樣板自動產生(Version:) #+ Version..: T10 ...
- Django初步完成:登录、注册、退出
python环境:python2.7 开发工具:pycharm 项目名称:mysite5 app名称:online settings:映射app路径 INSTALLED_APPS = [ 'djang ...
- dev gridview表格按钮
固定列的位置 添加按钮控件位置,使用buttonEdit 添加按钮 按钮属性设置 按钮设置后的效果 //注册按钮事件 this.ribtndata.ButtonClick += new DevExpr ...
- TensorFlow良心入门教程
All the matrials come from Machine Learning class in Polyu,HK and I reorganize them and add referenc ...
- win DLL 笔记
DLL 头文件: #ifdef DLL_API #else #define DLL 导出类 class DLL_API point { public: void aaa() { } } 导出类中函数 ...