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

資訊專欄INFORMATION COLUMN

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

劉玉平 / 460人閱讀

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

前言

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

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

不要用索引當key值

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

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

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

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

舊的

  • a
    • 

  • b

    • 新的

  • a
    • 

  • b
    • 

  • c
    • 

  • d

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

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

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

    第三項key為3的是新的，新增

    第四項key為4的是新的，新增

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

    假設(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

    • 這種情況下的流程：

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

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

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

    第四項key為4是新的，新增

    這個和我們想的就有區(qū)別了，因為我們只是想做兩步操作，即替換第1個和添加第4個。而現(xiàn)在做了四步操作。

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

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

    那么我們的列表會變成這樣

    舊的

  • b
    • 

  • c
    • 

  • e

    • 新的

  • a
    • 

  • b
    • 

  • c
    • 

  • d

    • 這種情況下的流程：

    第一項key為1是新的，新增，節(jié)點變成4個

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

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

    第四項key為4，舊的是5，替換節(jié)點

    將列表和列表項多帶帶寫成純組件 為什么？

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

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

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

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

    PureComponent

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

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

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

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

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

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

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

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

    {alert(11)} />

    但是這樣寫會有幾個問題

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

    因為每次render都是傳入新的函數(shù)，shouldUpdateComponent淺比較必然不相等，會導(dǎo)致PureComponent組件失去應(yīng)有效果。

    正確的做法

    如果使用了transform-class-properties

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

    或者

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

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

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

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

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

    相關(guān)文章

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

      摘要：目前開發(fā)的項目中為了仿原生效果如果自己去通過重新實現(xiàn)的話成本極大所以不得不使用來作為前端庫。可以在這個函數(shù)中清理在綁定的事件這個方式很有用。在開發(fā)過程中這些生命周期函數(shù)是我使用最頻繁最常見的操作。 ReactJS作為目前最火的構(gòu)建用戶界面的前端框架，為什么有那么多的前端工程師去追逐它，不僅因為它簡單，而且它提供了一系列強大的API讓我們擺脫以前繁瑣的DOM操作，使我們的邏輯更加清晰，代...

      MangoGoing 評論0 收藏0

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

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

      FingerLiu 評論0 收藏0

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

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

      番茄西紅柿 評論0 收藏0

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

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

      Brenner 評論0 收藏0

    • Reactjs vs. Vuejs

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

      AaronYuan 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <