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爽滑的拖拽組件

感謝你們支持，喜歡的給一點✨！～