React組件：拖拽布局Dragact v0.1.6 發布

caozhijian 發布于2019-08-22 14:50 / 996人閱讀

摘要：新特性性能提升通過對組件渲染的優化以及內部算法的優化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實例，我提供了一個，用于獲取當前的布局信息。

倉庫地址：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_布局拖拽布局拖拽組件組件拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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