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例子中

手机端的界面

下一个版本：

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

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

感谢你们支持，喜欢的给一点✨！～