React組件：拖拽布局Dragact v0.1.6 發(fā)布

caozhijian 發(fā)布于2019-08-22 14:50 / 1006人閱讀

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

倉庫地址：Dragact爽滑的拖拽組件

大家好，新年已經(jīng)過去，大家又投入了繁忙的工作當中，由于我在國外，因此壓根兒沒有休息...

少說廢話，上周一周的時間里，我陸陸續(xù)續(xù)的為Dragact
組件進行了一系列更新，基本上做了一個大重構(gòu)，而且做了一小部分性能優(yōu)化。

新特性1：性能提升

通過對React 組件渲染的優(yōu)化以及內(nèi)部算法的優(yōu)化，把大量的遍歷和渲染都省掉。

優(yōu)化前6s的性能

優(yōu)化后6s的性能

大家可以看到，同樣是跑6s，我們腳本計算時間，渲染時間，瀏覽器painting時間都有了很大幅度的提升。

新特性2：不一樣的掛件渲染Api 依賴注入式的掛件(widget)

可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。以往的React組件書寫方式，采用的是類似以下寫法：


        0
        1
        2

這么做當然可以，但是有幾個問題：

子組件非常的丑，需要我們定義一大堆東西

很難監(jiān)聽到子組件的事件，比如是否拖拽等

如果有大量的數(shù)據(jù)時，就必須寫對數(shù)組寫一個map函數(shù)，類似:layout.map(item=>item); 來幫助渲染數(shù)組

為了解決這個問題，我將子組件的渲染方式進行高度抽象成為一個構(gòu)造器，簡單來說就是以下的形式：


        {(item, isDragging) => {
            return 
                {isDragging ? "正在抓取" : "停放"}
            
        }}
    ,

現(xiàn)在，我們子元素渲染變成一個小小的構(gòu)造函數(shù)，第一個入?yún)⑹悄斎霐?shù)據(jù)的每一項，第二個參數(shù)就是isDragging，狀態(tài)監(jiān)聽參數(shù)。

這么做，輕易的實現(xiàn)了，組件漂亮，不用寫map函數(shù)，不用寫key，同時更容易監(jiān)聽每一個組件的拖拽狀態(tài)isDragging.

更多的依賴注入思想以及好處，請看我的知乎問答：知乎，方正的回答：如何設計一款組件庫

最后放一張圖動圖:

非常輕松的追蹤到了是否拖拽

新特性3：拖拽把手

通過全新的api，現(xiàn)在dragact能夠輕松的實現(xiàn)，全自定義的拖拽把手

點擊拖拽把手就能移動，不點擊？絕對不能移動

新特性4：數(shù)據(jù)驅(qū)動的模式

視圖的改變就是數(shù)據(jù)的改變

這是React給我們的一個啟示，Dragact組件通過對數(shù)據(jù)的處理，達到了數(shù)據(jù)變化即視圖變化。

這么做的好處就是我們可以輕松的將布局信息記錄在服務器的數(shù)據(jù)庫中，下一次拿到數(shù)據(jù)的時候，就可以輕松的恢復原來的視圖位置。

通過獲取Dragact組件的實例，我提供了一個api getLayout():DragactLayout;，用于獲取當前的布局信息。

在這個例子：Drag例子中，我們通過調(diào)用getLayout() api將數(shù)據(jù)存儲在本地瀏覽器中，當下次訪問的時候，我們就可以恢復之前所擺放的布局。

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

為了更好的觀看體驗，我為移動端的用戶們設計了一個用例頁面，現(xiàn)在可以在手機上玩耍啦！

手機端例子：Drag例子中

手機端的界面

下一個版本：

支持自動滾動，當拖拽鼠標到達瀏覽器邊緣的時候，視圖能夠自動滾動

列表布局，現(xiàn)在是全局布局，下個版本中考慮加入新的列表布局

拖拽把手的高街組件，目前拖拽把手實現(xiàn)有點點蛋疼，在下個版本中，我將進行著重修改

倉庫地址：[Dragact爽滑的拖拽組件

感謝大家支持，喜歡的給一點?！～

GPU云服務器云服務器 react_布局拖拽布局拖拽組件組件拖拽

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92924.html

React組件：拖拽布局Dragact v0.1.6 發(fā)布

摘要：新特性性能提升通過對組件渲染的優(yōu)化以及內(nèi)部算法的優(yōu)化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實例，我提供了一個，用于獲取當前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...

since1986 2019-08-01 18:38 評論0 收藏0
React拖拽組件Dragact V0.1.7：教你優(yōu)化React組件性能與手感

摘要：但是強迫癥犯了，為了使得性能達到極致，再次進行了深度的優(yōu)化。把移動中心設置在物體的重力中心，最為舒適。你可以狠狠的點擊預覽地址到此，組件，無論從性能，還是手感上來說，都已經(jīng)相當?shù)姆衔覀兊男枨罅恕? 倉庫地址：Dragact手感絲滑的拖拽布局組件預覽地址：支持手機端噢～上回我們說到，Dragact組件已經(jīng)進行了一系列的性能優(yōu)化，然而面對大量數(shù)據(jù)的時候，依舊比較吃力，讓我們來看看，優(yōu)化...

fizz 2019-08-01 18:39 評論0 收藏0
React拖拽組件Dragact V0.1.7：教你優(yōu)化React組件性能與手感

摘要：但是強迫癥犯了，為了使得性能達到極致，再次進行了深度的優(yōu)化。把移動中心設置在物體的重力中心，最為舒適。你可以狠狠的點擊預覽地址到此，組件，無論從性能，還是手感上來說，都已經(jīng)相當?shù)姆衔覀兊男枨罅恕? 倉庫地址：Dragact手感絲滑的拖拽布局組件預覽地址：支持手機端噢～上回我們說到，Dragact組件已經(jīng)進行了一系列的性能優(yōu)化，然而面對大量數(shù)據(jù)的時候，依舊比較吃力，讓我們來看看，優(yōu)化...

王巖威 2019-08-22 14:57 評論0 收藏0
React組件：Dragact 0.1.4發(fā)布

摘要：下個版本在下個版本中，我會對其進行支持響應式自由切換拖拽和縮放手機也能操作倉庫地址預覽多謝大家支持。 Dragact 是一款React組件，他能夠使你簡單、快速的構(gòu)建出一款強大的拖拽式網(wǎng)格(grid)布局. 倉庫地址：Dragact 經(jīng)過幾天的迭代時間Dragact已經(jīng)能夠支持自由縮放功能了(resize) 廢話不多說，來看看demo 新特性1：大小自由縮放 showImg(http...

bergwhite 2019-08-30 13:58 評論0 收藏0