仓库地址: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. 算法巩固的第一天-java冒泡排序算法

    自媒体萌新一枚,不对的地方各路大神可以指点指点!个人理解: 冒泡排序算法<插入排序算法<快速排序算法 /** * 冒泡排序算法 * @author sj * */ public class ...

  3. 2019icpc银川网络赛

    外面吵得风生水起,我校平静地在打比赛,丝毫不知道这次比赛的题目就是把2018银川邀请赛的题照搬过来了QAQ,主办方真牛逼.. A Maximum(思维) 题意:维护一个栈,支持入栈和出栈操作,并计算每 ...

  4. 【环境搭建】Angular (含Hello World)

    一.环境安装 1.安装node.js 下载路径:https://nodejs.org/en/download/ 命令行验证: 2.安装ts.cli ts: npm install -g typescr ...

  5. [Err] 1054 - Unknown error 1054

    [Err] 1054 - Unknown error 1054:很小的一个错误,缺耽误很长的时间,字段不匹配: 解决方法:一一对照字段,数据库字段要和类中的字段要对应,或者sql语句中使用的字段!仔细 ...

  6. Python格式化输出的三种方式

    Python格式化输出的三种方式 一.占位符 程序中经常会有这样场景:要求用户输入信息,然后打印成固定的格式比如要求用户输入用户名和年龄,然后打印如下格式:My name is xxx,my age ...

  7. jenkins+docker+git+etcd实现应用配置文件管理

    两台机器: 一台机器安装gitlab: http://www.cnblogs.com/cjsblogs/p/8716932.html 另一台机器安装etcd+docker+jenkins jenkin ...

  8. 弹窗插件 layer

    官方网站 http://layer.layui.com/ Github 地址 https://github.com/sentsin/layer //在这里面输入任何合法的js语句 layer.open ...

  9. BZOJ4241历史研究题解--回滚莫队

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4241 分析 这题就是求区间权值乘以权值出现次数的最大值,一看莫队法块可搞,但仔细想想,莫 ...

  10. C++ STL用法总结(持续更新)

    Vector 动态数组 https://www.cnblogs.com/zhonghuasong/p/5975979.html lower_bound&&upper_bound htt ...