成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

caozhijian / 1010人閱讀

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

倉(cāng)庫(kù)地址：Dragact爽滑的拖拽組件

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

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

新特性1：性能提升

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


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


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

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

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

可以從最簡(jiǎn)單的例子看出，我們渲染子組件的方式和以往有些不同。以往的React組件書(shū)寫(xiě)方式，采用的是類(lèi)似以下寫(xiě)法：


        
0

        
1

        
2

這么做當(dāng)然可以，但是有幾個(gè)問(wèn)題：

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

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

如果有大量的數(shù)據(jù)時(shí)，就必須寫(xiě)對(duì)數(shù)組寫(xiě)一個(gè)map函數(shù)，類(lèi)似:layout.map(item=>item); 來(lái)幫助渲染數(shù)組

為了解決這個(gè)問(wèn)題，我將子組件的渲染方式進(jìn)行高度抽象成為一個(gè)構(gòu)造器，簡(jiǎn)單來(lái)說(shuō)就是以下的形式：


        {(item, isDragging) => {
            return 

                {isDragging ? "正在抓取" : "停放"}
            

        }}
    ,

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

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

更多的依賴(lài)注入思想以及好處，請(qǐng)看我的知乎問(wèn)答：知乎，方正的回答：如何設(shè)計(jì)一款組件庫(kù)

最后放一張圖動(dòng)圖:

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

新特性3：拖拽把手

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

點(diǎn)擊拖拽把手就能移動(dòng)，不點(diǎn)擊？絕對(duì)不能移動(dòng)

新特性4：數(shù)據(jù)驅(qū)動(dòng)的模式 
視圖的改變就是數(shù)據(jù)的改變

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

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

通過(guò)獲取Dragact組件的實(shí)例，我提供了一個(gè)api getLayout():DragactLayout;，用于獲取當(dāng)前的布局信息。

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

新特性5：全新的用例，支持移動(dòng)端

為了更好的觀(guān)看體驗(yàn)，我為移動(dòng)端的用戶(hù)們?cè)O(shè)計(jì)了一個(gè)用例頁(yè)面，現(xiàn)在可以在手機(jī)上玩耍啦！

手機(jī)端例子：Drag例子中

手機(jī)端的界面

下一個(gè)版本：

支持自動(dòng)滾動(dòng)，當(dāng)拖拽鼠標(biāo)到達(dá)瀏覽器邊緣的時(shí)候，視圖能夠自動(dòng)滾動(dòng)

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

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

倉(cāng)庫(kù)地址：[Dragact爽滑的拖拽組件

感謝大家支持，喜歡的給一點(diǎn)?！～

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92924.html

相關(guān)文章

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

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

    since1986 評(píng)論0 收藏0

  • React拖拽組件Dragact V0.1.7：教你優(yōu)化React組件性能與手感

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

    fizz 評(píng)論0 收藏0

  • React拖拽組件Dragact V0.1.7：教你優(yōu)化React組件性能與手感

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

    王巖威 評(píng)論0 收藏0

  • React組件：Dragact 0.1.4發(fā)布

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

    bergwhite 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<