倉庫地址：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爽滑的拖拽組件
感謝大家支持，喜歡的給一點?！～
