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

資訊專欄INFORMATION COLUMN

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

王巖威 / 1648人閱讀

摘要：但是強(qiáng)迫癥犯了，為了使得性能達(dá)到極致，再次進(jìn)行了深度的優(yōu)化。把移動(dòng)中心設(shè)置在物體的重力中心，最為舒適。你可以狠狠的點(diǎn)擊預(yù)覽地址到此，組件，無論從性能，還是手感上來說，都已經(jīng)相當(dāng)?shù)姆衔覀兊男枨罅恕?/p>

倉(cāng)庫(kù)地址：Dragact手感絲滑的拖拽布局組件

預(yù)覽地址：支持手機(jī)端噢～

上回我們說到，Dragact組件已經(jīng)進(jìn)行了一系列的性能優(yōu)化，然而面對(duì)大量數(shù)據(jù)的時(shí)候，依舊比較吃力，讓我們來看看，優(yōu)化之前的Dragact。

縱向堆疊著314個(gè)方塊，插入時(shí)明顯的卡頓，大約1秒的延遲

同樣縱向堆疊著314個(gè)方塊，插入時(shí)卡頓明顯減少很多，可以接受

在實(shí)際生產(chǎn)過程中，可能不會(huì)有那么多物塊，就拿我們項(xiàng)目的dashboard來說，整個(gè)屏幕最多只有10個(gè)方塊，就已經(jīng)是了不起了。

但是強(qiáng)迫癥犯了，為了使得性能達(dá)到極致，再次進(jìn)行了深度的優(yōu)化。

React優(yōu)化的策略有哪些呢？

策略一: shouldComponentUpdate()

因?yàn)镽eact 的diff只是簡(jiǎn)單的深度優(yōu)先+刷新策略去diff html tag，所以數(shù)據(jù)的改變，React是不會(huì)知道的。

因此，開發(fā)者必須得自己去diff數(shù)據(jù)，shouldComponentUpdate就是用來diff數(shù)據(jù)的一個(gè)特殊聲明周期函數(shù)。

具體的，請(qǐng)看我之前的回答和徐飛叔的回答：

方正：Vue為什么沒有shouldComponentUpdate的生命周期？

徐飛：Vue為什么沒有shouldComponentUpdate的生命周期？

策略二：用記憶功能函數(shù)去緩存大量計(jì)算結(jié)果

有很多情況下，我們的遍歷是不可避免的。

React中最著名性能問題，就是selector問題，現(xiàn)在大家也都知道用reselect去做性能優(yōu)化了，但是本質(zhì)呢？

我們寫一點(diǎn)偽代碼來做演示：

//首先，我們有一個(gè)斐波那契生成函數(shù)  fib();
//用戶想用的時(shí)候，就會(huì)去掉這個(gè)函數(shù)
const number = fib();


//我們知道，fib()函數(shù)里面會(huì)經(jīng)過大量的計(jì)算，才得出我們想要的結(jié)果
//但是，除了第一次計(jì)算之外，之后的所有計(jì)算都是不需要的，因?yàn)槲覀円呀?jīng)在一開始拿到結(jié)果了

//怎么做最好呢？閉包;

const Fib = function (){
   var cache = void 666;
   return function(){
      if(!cache){
          cache = fib();
          return cache;
       }
      return cache;
   }
}();

//當(dāng)用戶調(diào)用Fib的時(shí)候，只會(huì)在第一次進(jìn)行計(jì)算，之后的后只會(huì)從cache中拿出來。

不要小看這種優(yōu)化，很多時(shí)候，我們大量重復(fù)的遍歷就會(huì)導(dǎo)致性能的低下。

策略三：減少dom的深度

我們都知道，每次react 更新的時(shí)候，都會(huì)進(jìn)行diff，深度越大，diff的層次越多。

減少diff的層次是非常重要的性能優(yōu)化手段，尤其是數(shù)據(jù)量巨大的時(shí)候。

具體怎么去減少dom的深度，方法有很多，我用的方法是：render children的辦法。

簡(jiǎn)單的舉個(gè)例子，拖拽組件：


    
我是拖拽的組件

這樣的一個(gè)設(shè)計(jì)，看似很簡(jiǎn)單，很明了。用Dragger組件去包囊我們想要的組件，就可以讓其獲得拖拽的屬性。

這么做不是不行，但是很多時(shí)候我們?cè)谠O(shè)計(jì)之初，沒考慮那么多，就會(huì)使用這樣一種方式去設(shè)計(jì)：

class Dragger extends Component{
    moving(){}......

    render(){
      return (

         {this.props.children}
         
)
    }

}

是不是很常見？這么做的問題其實(shí)很明顯，就是無緣無故的，我們多了一層div，組件一多，那么就多會(huì)了幾層div，無疑造成了渲染壓力。

使用render children，我們可以這么設(shè)計(jì)

class Dragger extends Component{
    moving(){}......

    render(){
      const provided = {
       onMouseDown:this.onMouseDown
         onTouchDown:this.onTouchDown
         style:{....}
      }
      return this.props.children(provided);
    }
}

在外部使用的時(shí)候，就變成了：


    {(provided)=>
我是拖拽的組件
}

看似稍微蛋疼了一些，但是好處就是：減少了dom的層級(jí)。

還有更多好處，可以看之前的一篇文章：React組件：拖拽布局Dragact v0.1.6 發(fā)布

手感的優(yōu)化 

看似很標(biāo)準(zhǔn)，實(shí)際上用戶需要拖動(dòng)很遠(yuǎn)，才會(huì)物體進(jìn)行交換

看似很標(biāo)準(zhǔn)，實(shí)際上用戶需要拖動(dòng)很遠(yuǎn)，才會(huì)物體進(jìn)行交換，造成這樣讓人不適的感覺原因是因?yàn)橛?jì)算時(shí)，我取的計(jì)算中心永遠(yuǎn)是物體的頂邊。

所以，當(dāng)物體向下滑動(dòng)的時(shí)候，必須要物體的頂邊到達(dá)下一個(gè)物塊的中心才能發(fā)生交換。

上圖我們可以看到，長(zhǎng)條的物塊，已經(jīng)拖出了屏幕很遠(yuǎn)，才會(huì)進(jìn)行交換。

就這一點(diǎn)點(diǎn)差異，讓我頓時(shí)感到不爽！

為了使得手感更加優(yōu)異，做了大量實(shí)驗(yàn)以后，我發(fā)現(xiàn)，把移動(dòng)中心設(shè)置在物體的重力中心，最為舒適。

把移動(dòng)中心設(shè)置在物體的重力中心，最為舒適。

這一點(diǎn)點(diǎn)設(shè)計(jì)的改變，使得手感完全不同了。

你可以狠狠的點(diǎn)擊：預(yù)覽地址

到此，Dragact組件，無論從性能，還是手感上來說，都已經(jīng)相當(dāng)?shù)姆衔覀兊男枨罅恕?/p>

yeah~

各位，我們下次見。

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

  • React造輪子：拖拽排序組件「Dragact」

    摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調(diào)整后臺(tái)的各種表盤位置。內(nèi)的所有組件必須不能重疊，還要能自動(dòng)排序某些組件要可以設(shè)定靜態(tài)的，也就是固定在那里，不被布局的任何變動(dòng)而影響。為了快速獲得這種心態(tài)的轉(zhuǎn)變，你要做的就是造輪子。 先來一張圖看看： showImg(https://segmentfault.com/img/remote/1460000013305417?w=600&h=...

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

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

0條評(píng)論

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