国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Reactjs 列表優(yōu)化的一些心得。

劉玉平 / 443人閱讀

摘要：前言在應(yīng)用開發(fā)中，列表是我們使用頻率非常高的一種展現(xiàn)形式，在項(xiàng)目中更是如此。無處不在的使用更是需要我們小心觸發(fā)性能瓶頸的深水炸彈。不要用索引當(dāng)值要求我們對(duì)列表中的每一項(xiàng)設(shè)置一個(gè)唯一的值，這個(gè)虛擬的算法有很大關(guān)系。

前言

在應(yīng)用開發(fā)中，列表是我們使用頻率非常高的一種展現(xiàn)形式，在reactjs項(xiàng)目中更是如此。無處不在的使用更是需要我們小心觸發(fā)性能瓶頸的深水炸彈。

下面就我最近的總結(jié)出的幾點(diǎn)心得分享給大家，有什么問題歡迎批評(píng)指正。

不要用索引當(dāng)key值

reactjs要求我們對(duì)列表中的每一項(xiàng)設(shè)置一個(gè)唯一的key值，這個(gè)虛擬dom的diff算法有很大關(guān)系。簡單的說，在同一級(jí)dom樹中，有2種情況會(huì)引起元素（這里的元素指的是虛擬dom，而不是真正的dom元素）的增刪。

1.元素的類型改變
2.key值變化

在列表中，元素類型一般是相同的，所以我們需要根據(jù)唯一的key值來給當(dāng)前元素加上標(biāo)記，這樣reactjs才能感知元素是否需要增加或刪除了。

reactjs采用的非常直接粗暴的算法來判斷元素的增刪，比如

舊的

  • a
    • 

  • b

    • 新的

  • a
    • 

  • b
    • 

  • c
    • 

  • d

    • 我們來分析下這種情況下的流程：

    對(duì)比第一項(xiàng)key都是1，內(nèi)容不變，不處理

    對(duì)比第二項(xiàng)key都是2，內(nèi)容不變，不處理

    第三項(xiàng)key為3的是新的，新增

    第四項(xiàng)key為4的是新的，新增

    這個(gè)例子中我們使用索引(+1)作為key，沒有什么問題，完全符合我們的預(yù)期。接下我們看第二個(gè)

    假設(shè)我們的的列表數(shù)據(jù)從

    [
    {id:2,text:"b"},
    {id:3,text:"c"},
    {id:5,text:"e"}
]

    變成了

    [
    {id:1,text:"a"},
    {id:2,text:"b"},
    {id:3,text:"c"},
    {id:4,text:"d"}
]

    仍然使用索引作為key，那么渲染出來的應(yīng)該是

    舊的

  • b
    • 

  • c
    • 

  • e

    • 新的

  • a
    • 

  • b
    • 

  • c
    • 

  • d

    • 這種情況下的流程：

    對(duì)比第一項(xiàng)key都是1，但是內(nèi)容變了，替換文本

    對(duì)比第二項(xiàng)key都是2，但是內(nèi)容變了，替換文本

    對(duì)比第三項(xiàng)key都是3，但是內(nèi)容變了，替換文本

    第四項(xiàng)key為4是新的，新增

    這個(gè)和我們想的就有區(qū)別了，因?yàn)槲覀冎皇窍胱鰞刹讲僮鳎刺鎿Q第1個(gè)和添加第4個(gè)。而現(xiàn)在做了四步操作。

    也許這個(gè)例子顯得沒有那么糟糕，但是想象一下，如果是在一個(gè)50項(xiàng)的列表中插入1個(gè)新的到頭部，那么后面的50項(xiàng)將都會(huì)進(jìn)行dom更新渲染，如果每一項(xiàng)內(nèi)容是復(fù)雜的組件，那么代價(jià)更加高昂，而我們其實(shí)只是想在第一個(gè)元素前插入一條。

    那么如果解決上面的問題呢，其實(shí)很簡單，我們的列表數(shù)據(jù)都有唯一的id值，而實(shí)際開發(fā)中我們列表中一般都會(huì)存在這樣的唯一值，我們只需要把它復(fù)制給key即可。

    那么我們的列表會(huì)變成這樣

    舊的

  • b
    • 

  • c
    • 

  • e

    • 新的

  • a
    • 

  • b
    • 

  • c
    • 

  • d

    • 這種情況下的流程：

    第一項(xiàng)key為1是新的，新增，節(jié)點(diǎn)變成4個(gè)

    對(duì)比第二項(xiàng)key都是2，內(nèi)容不變，不處理

    對(duì)比第三項(xiàng)key都是3，內(nèi)容不變，不處理

    第四項(xiàng)key為4，舊的是5，替換節(jié)點(diǎn)

    將列表和列表項(xiàng)多帶帶寫成純組件 為什么？

    我們可能已經(jīng)習(xí)慣這樣寫列表

    render(){
    render (
        
      
            {this.state.list.map(item=>
    • {item.text}
    • )}
        
    
    )
}

    在大多數(shù)情況下，這樣寫沒有什么問題，reactjs執(zhí)行速度很快，但是有些情況下，這樣寫可能成為導(dǎo)致網(wǎng)頁卡頓的罪魁禍?zhǔn)住?/p>

    每當(dāng)我們改變組件狀態(tài)的時(shí)候，reactjs都會(huì)重建當(dāng)前組件的整個(gè)虛擬dom樹，也就是說不管你的state.list是否有改變，整個(gè)樹都會(huì)重建，而這個(gè)時(shí)候列表的渲染是不必要的，當(dāng)列表過長，組件狀態(tài)更新頻繁，甚至手機(jī)性能不佳的情況下，不斷的重新創(chuàng)建虛擬dom樹很有可能會(huì)導(dǎo)致頁面幀數(shù)下降。

    PureComponent

    PureComponent和Component沒什么什么區(qū)別，除了它默認(rèn)在shouldUpdateComponent里面默認(rèn)做了淺比較，如果相同，則不會(huì)觸發(fā)更新渲染。

    在reactjs中，數(shù)據(jù)推薦處理成不可變數(shù)據(jù)(這里不是指immutable.js，而是說對(duì)象始終是不變的，如果數(shù)據(jù)有變了，必須是新的對(duì)象)，配合redux的時(shí)候更是如此。所以如果list發(fā)生改變時(shí)，傳入的必然是新的對(duì)象，這個(gè)時(shí)候會(huì)觸發(fā)列表組件更新。

    使用 
    class List extends PureComponent{
    render(){
        return (
            
      
            {this.props.list.map(item=>
    • {item.text}
    • )}
        
    
        )
    }
}

/*** parent ***/
// .....
render(){
    render (
        
    )
}
// ...
    子組件

    當(dāng)我們列表的子元素是復(fù)雜的組建時(shí)，我們也應(yīng)該多帶帶提取成PureComponent，以避免不必要的渲染，事實(shí)上，我覺得大多數(shù)組件都可以使用PureComponent替換Component。

    不要在屬性上箭頭函數(shù)

    箭頭函數(shù)很方便，不僅寫法簡單還能保持this指向父級(jí)作用域。

    為了維護(hù)事件處理函數(shù)的this，我們經(jīng)常在組件中看到它類似這樣的使用

    {alert(11)} />

    但是這樣寫會(huì)有幾個(gè)問題

    每次render都會(huì)重新創(chuàng)建一個(gè)新的函數(shù)，瀏覽器創(chuàng)建和回收對(duì)象都會(huì)有開銷，如果是列表，那么每個(gè)列表項(xiàng)都會(huì)創(chuàng)建和銷毀。

    因?yàn)槊看?b>render都是傳入新的函數(shù)，shouldUpdateComponent淺比較必然不相等，會(huì)導(dǎo)致PureComponent組件失去應(yīng)有效果。

    正確的做法

    如果使用了transform-class-properties

    handleClick = ()=>{
    alert(1)
}

    或者

    constructor(){
    super(...arguments)
    this.handleClick = this.handleClick.bind(this)
}

handleClick = ()=>{
    alert(1)
}
    結(jié)束語

    暫時(shí)就總結(jié)了這些吧，以后有新的心得再更新，歡迎交流留言。

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

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

    相關(guān)文章

    • ReactJS 開發(fā)過程中的一些使用心得

      摘要：目前開發(fā)的項(xiàng)目中為了仿原生效果如果自己去通過重新實(shí)現(xiàn)的話成本極大所以不得不使用來作為前端庫。可以在這個(gè)函數(shù)中清理在綁定的事件這個(gè)方式很有用。在開發(fā)過程中這些生命周期函數(shù)是我使用最頻繁最常見的操作。 ReactJS作為目前最火的構(gòu)建用戶界面的前端框架，為什么有那么多的前端工程師去追逐它，不僅因?yàn)樗唵危宜峁┝艘幌盗袕?qiáng)大的API讓我們擺脫以前繁瑣的DOM操作，使我們的邏輯更加清晰，代...

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

    • ReactJS新聞 #21 React Native中更好的列表視圖

      摘要：新聞第期新聞中更好的列表視圖官方博客近日發(fā)表了新的列表組件的消息，三月份的候選版本的中，加入了三種新的與組件，可以針對(duì)不同情況需求而使用，這三個(gè)新組件的數(shù)據(jù)來源，都可以對(duì)外部的數(shù)據(jù)流框架或進(jìn)行搭配使用。目前中的類似功能仍然在草案中。 ReactJS新聞 第021期 (2017.03.26) 新聞 React Native中更好的List Views(列表視圖) React Naive...

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

    • CDN使用心得：加速雙刃劍

      摘要：文章圖片存儲(chǔ)在，網(wǎng)速不佳的朋友，請(qǐng)看使用心得加速雙刃劍或者來我的技術(shù)小站本文以騰訊云平臺(tái)的服務(wù)為例，記錄下在個(gè)人網(wǎng)站開發(fā)和公司項(xiàng)目實(shí)戰(zhàn)中的對(duì)使用的心得便宜沒好貨。此時(shí)，更應(yīng)該使用來提速。 文章圖片存儲(chǔ)在GitHub，網(wǎng)速不佳的朋友，請(qǐng)看《CDN 使用心得：加速雙刃劍》 或者 來我的技術(shù)小站 godbmw.com 本文以騰訊云平臺(tái)的 CDN 服務(wù)為例，記錄下在個(gè)人網(wǎng)站開發(fā)和公司項(xiàng)目實(shí)戰(zhàn)中...

      番茄西紅柿 評(píng)論0 收藏0

    • CDN使用心得：加速雙刃劍

      摘要：文章圖片存儲(chǔ)在，網(wǎng)速不佳的朋友，請(qǐng)看使用心得加速雙刃劍或者來我的技術(shù)小站本文以騰訊云平臺(tái)的服務(wù)為例，記錄下在個(gè)人網(wǎng)站開發(fā)和公司項(xiàng)目實(shí)戰(zhàn)中的對(duì)使用的心得便宜沒好貨。此時(shí)，更應(yīng)該使用來提速。 文章圖片存儲(chǔ)在GitHub，網(wǎng)速不佳的朋友，請(qǐng)看《CDN 使用心得：加速雙刃劍》 或者 來我的技術(shù)小站 godbmw.com 本文以騰訊云平臺(tái)的 CDN 服務(wù)為例，記錄下在個(gè)人網(wǎng)站開發(fā)和公司項(xiàng)目實(shí)戰(zhàn)中...

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

    • Reactjs vs. Vuejs

      摘要：上圖是二月份前端框架排名，位居第一，排名第三。我們認(rèn)為前端模板和組件代碼是緊密相連的。直到最近看了文檔，才發(fā)現(xiàn)另有蹊蹺。 歡迎大家關(guān)注騰訊云技術(shù)社區(qū)-segmentfault官方主頁，我們將持續(xù)在博客園為大家推薦技術(shù)精品文章哦~ 紀(jì)俊，從事Web前端開發(fā)工作，2016年加入騰訊OMG廣告平臺(tái)產(chǎn)品部，喜歡研究前端技術(shù)框架。 這里要討論的話題，不是前端框架哪家強(qiáng)，因?yàn)樵?Vue 官網(wǎng)就已經(jīng)...

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

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

    0條評(píng)論

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