image

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

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

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

新特性1：性能提升

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

image

优化前6s的性能

image

优化后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.

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

最后放一张图动图:

image

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

新特性3：拖拽把手

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

image

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

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

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

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

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

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

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

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

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

手机端例子：Drag例子中

手机端的界面

image

下一个版本：

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

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

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