React组件：拖拽布局Dragact v0.1.6 发布

caozhijian 发布于2019-08-22 14:50 / 946人阅读

摘要：新特性性能提升通过对组件渲染的优化以及内部算法的优化，把大量的遍历和渲染都省掉。新特性不一样的挂件渲染依赖注入式的挂件可以从最简单的例子看出，我们渲染子组件的方式和以往有些不同。通过获取组件的实例，我提供了一个，用于获取当前的布局信息。

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

大家好，新年已经过去，大家又投入了繁忙的工作当中，由于我在国外，因此压根儿没有休息...

少说废话，上周一周的时间里，我陆陆续续的为Dragact
组件进行了一系列更新，基本上做了一个大重构，而且做了一小部分性能优化。

新特性1：性能提升

通过对React 组件渲染的优化以及内部算法的优化，把大量的遍历和渲染都省掉。

优化前6s的性能

优化后6s的性能

大家可以看到，同样是跑6s，我们脚本计算时间，渲染时间，浏览器painting时间都有了很大幅度的提升。

新特性2：不一样的挂件渲染Api 依赖注入式的挂件(widget)

可以从最简单的例子看出，我们渲染子组件的方式和以往有些不同。以往的React组件书写方式，采用的是类似以下写法：


        0
        1
        2

这么做当然可以，但是有几个问题：

子组件非常的丑，需要我们定义一大堆东西

很难监听到子组件的事件，比如是否拖拽等

如果有大量的数据时，就必须写对数组写一个map函数，类似:layout.map(item=>item); 来帮助渲染数组

为了解决这个问题，我将子组件的渲染方式进行高度抽象成为一个构造器，简单来说就是以下的形式：


        {(item, isDragging) => {
            return 
                {isDragging ? "正在抓取" : "停放"}
            
        }}
    ,

现在，我们子元素渲染变成一个小小的构造函数，第一个入参是您输入数据的每一项，第二个参数就是isDragging，状态监听参数。

这么做，轻易的实现了，组件漂亮，不用写map函数，不用写key，同时更容易监听每一个组件的拖拽状态isDragging.

更多的依赖注入思想以及好处，请看我的知乎问答：知乎，方正的回答：如何设计一款组件库

最后放一张图动图:

非常轻松的追踪到了是否拖拽

新特性3：拖拽把手

通过全新的api，现在dragact能够轻松的实现，全自定义的拖拽把手

点击拖拽把手就能移动，不点击？绝对不能移动

新特性4：数据驱动的模式

视图的改变就是数据的改变

这是React给我们的一个启示，Dragact组件通过对数据的处理，达到了数据变化即视图变化。

这么做的好处就是我们可以轻松的将布局信息记录在服务器的数据库中，下一次拿到数据的时候，就可以轻松的恢复原来的视图位置。

通过获取Dragact组件的实例，我提供了一个api getLayout():DragactLayout;，用于获取当前的布局信息。

在这个例子：Drag例子中，我们通过调用getLayout() api将数据存储在本地浏览器中，当下次访问的时候，我们就可以恢复之前所摆放的布局。

新特性5：全新的用例，支持移动端

为了更好的观看体验，我为移动端的用户们设计了一个用例页面，现在可以在手机上玩耍啦！

手机端例子：Drag例子中

手机端的界面

下一个版本：

支持自动滚动，当拖拽鼠标到达浏览器边缘的时候，视图能够自动滚动

列表布局，现在是全局布局，下个版本中考虑加入新的列表布局

拖拽把手的高街组件，目前拖拽把手实现有点点蛋疼，在下个版本中，我将进行着重修改

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

感谢大家支持，喜欢的给一点✨！～

GPU云服务器云服务器 react_布局拖拽布局拖拽组件组件拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92924.html

React组件：拖拽布局Dragact v0.1.6 发布

摘要：新特性性能提升通过对组件渲染的优化以及内部算法的优化，把大量的遍历和渲染都省掉。新特性不一样的挂件渲染依赖注入式的挂件可以从最简单的例子看出，我们渲染子组件的方式和以往有些不同。通过获取组件的实例，我提供了一个，用于获取当前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...

since1986 2019-08-01 18:38 评论0 收藏0
React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

摘要：但是强迫症犯了，为了使得性能达到极致，再次进行了深度的优化。把移动中心设置在物体的重力中心，最为舒适。你可以狠狠的点击预览地址到此，组件，无论从性能，还是手感上来说，都已经相当的符合我们的需求了。仓库地址：Dragact手感丝滑的拖拽布局组件预览地址：支持手机端噢～上回我们说到，Dragact组件已经进行了一系列的性能优化，然而面对大量数据的时候，依旧比较吃力，让我们来看看，优化...

fizz 2019-08-01 18:39 评论0 收藏0
React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

摘要：但是强迫症犯了，为了使得性能达到极致，再次进行了深度的优化。把移动中心设置在物体的重力中心，最为舒适。你可以狠狠的点击预览地址到此，组件，无论从性能，还是手感上来说，都已经相当的符合我们的需求了。仓库地址：Dragact手感丝滑的拖拽布局组件预览地址：支持手机端噢～上回我们说到，Dragact组件已经进行了一系列的性能优化，然而面对大量数据的时候，依旧比较吃力，让我们来看看，优化...

王岩威 2019-08-22 14:57 评论0 收藏0
React组件：Dragact 0.1.4发布

摘要：下个版本在下个版本中，我会对其进行支持响应式自由切换拖拽和缩放手机也能操作仓库地址预览多谢大家支持。 Dragact 是一款React组件，他能够使你简单、快速的构建出一款强大的拖拽式网格(grid)布局. 仓库地址：Dragact 经过几天的迭代时间Dragact已经能够支持自由缩放功能了(resize) 废话不多说，来看看demo 新特性1：大小自由缩放 showImg(http...

bergwhite 2019-08-30 13:58 评论0 收藏0