仓库地址: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例子中

手机端的界面

下一个版本:

  • 支持自动滚动,当拖拽鼠标到达浏览器边缘的时候,视图能够自动滚动
  • 列表布局,现在是全局布局,下个版本中考虑加入新的列表布局
  • 拖拽把手的高街组件,目前拖拽把手实现有点点蛋疼,在下个版本中,我将进行着重修改

仓库地址:[Dragact爽滑的拖拽组件

感谢大家支持,喜欢的给一点✨!~

React组件:拖拽布局Dragact v0.1.6 发布的更多相关文章

  1. React 实现拖拽功能

    实现效果:(可戳 https://codepen.io/wenr/pen/EGEQxp 查看) 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感 ...

  2. 使用TypeScript给Vue 3.0写一个指令实现组件拖拽

    最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考 ...

  3. react 可拖拽改变位置和大小的弹窗

    一 目标 最近,项目上需要一个可以弹出一个可以移动位置和改变大小的窗口,来显示一下对当前页面的一个辅助内容 二 思路 1.之前写过一个antd modal的可移动弹窗但是毕竟不如自己写的更定制化,比如 ...

  4. React拖拽组件Dragact V0.1.7:教你优化React组件性能与手感

    仓库地址:Dragact手感丝滑的拖拽布局组件 预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dr ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. Vue拖拽组件列表实现动态页面配置

    需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除. 根据这个需求我 ...

  7. jqueryui sortable拖拽后保存位置

    jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用   var a ...

  8. React造轮子:拖拽排序组件「Dragact」

    先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...

  9. 强大的拖拽组件:React DnD 的使用

    强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读  ·  读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...

随机推荐

  1. Prometheus + Grafana 监控 Redis

    Prometheus安装 .linux-amd64.tar.gz .linux-amd64. cd /prometheus # Start Prometheus. # By default, Prom ...

  2. 关于Dev-c++运行时与Windows不兼容问题

    问题描述. 解决方案 1.鼠标右键点击图标,进入属性. 2.点击上方的兼容性. 3.在兼容模式中勾选以兼容模式运行这个程序并选择windows7. 4.再点击以管理员身份运行此程序. 5.点击应用. ...

  3. kafka原理和操作

    参考: 原理: https://www.cnblogs.com/yinzhengjie/p/9780976.html 常用配置参数: https://www.cnblogs.com/yinzhengj ...

  4. 【转帖】CentOS 7 修改时区

    CentOS 7 修改时区 https://www.cnblogs.com/yaohong/p/7269878.html timedatectl 以及 time   分类: 操作系统-CentOS u ...

  5. 第一章 Scala基础篇

    目录 一.Scala基础语法 (一) 变量.类型.操作符 1.变量申明 2.字符串 3.数据类型 4.操作符 (二)循环判断 1.块表达式 2.条件表达式 3.循环表达式 (三)方法和函数 1.方法 ...

  6. MySql 中锁的定义

    行级锁,一般是指排它锁,即被锁定行不可进行修改,删除,只可以被其他会话select.行级锁之前需要先加表结构共享锁. 表级锁,一般是指表结构共享锁锁,是不可对该表执行DDL操作,但对DML操作都不限制 ...

  7. Docker结合Jenkins构建持续集成环境

    1.环境说明: jenkins+svn:192.168.71.142 测试环境:192.168.71.145 生产环境:192.168.71.148 操作系统:centos7. Maven3. Tom ...

  8. EXSI宿主机更换硬盘后虚机启动有问题

    环境说明: 最近EXSI主机磁盘坏掉了,重新换掉磁盘以后启动虚机有问题. 虚机的报错信息如下: 找了下修复方法,操作过程为: 尝试修复 (以下是百度的方法) ls -l /dev/mapper mkd ...

  9. java——多线程知识点大总结

    1:理解线程的概念之前,我们有必要先理解一下进程的概念 程序(Program)是为实现特定目标或解决特定问题而用计算机语言(比如Java语言)编写的命令序列的集合. 进程指一个程序的一次执行过程   ...

  10. sql当前时间往后半年

    select  DATEADD(MONTH, -6, GETDATE()) select  DATEADD(hh, -6, GETDATE())