资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Reactjs 列表优化的一些心得。

Reactjs 列表优化的一些心得。

刘玉平 / 422人阅读

摘要：前言在应用开发中，列表是我们使用频率非常高的一种展现形式，在项目中更是如此。无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹。不要用索引当值要求我们对列表中的每一项设置一个唯一的值，这个虚拟的算法有很大关系。

前言

在应用开发中，列表是我们使用频率非常高的一种展现形式，在reactjs项目中更是如此。无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹。

下面就我最近的总结出的几点心得分享给大家，有什么问题欢迎批评指正。

不要用索引当key值

reactjs要求我们对列表中的每一项设置一个唯一的key值，这个虚拟dom的diff算法有很大关系。简单的说，在同一级dom树中，有2种情况会引起元素（这里的元素指的是虚拟dom，而不是真正的dom元素）的增删。

1.元素的类型改变
2.key值变化

在列表中，元素类型一般是相同的，所以我们需要根据唯一的key值来给当前元素加上标记，这样reactjs才能感知元素是否需要增加或删除了。

reactjs采用的非常直接粗暴的算法来判断元素的增删，比如

旧的

  • a
    • 

  • b

    • 新的

  • a
    • 

  • b
    • 

  • c
    • 

  • d

    • 我们来分析下这种情况下的流程：

    对比第一项key都是1，内容不变，不处理

    对比第二项key都是2，内容不变，不处理

    第三项key为3的是新的，新增

    第四项key为4的是新的，新增

    这个例子中我们使用索引(+1)作为key，没有什么问题，完全符合我们的预期。接下我们看第二个

    假设我们的的列表数据从

    [
    {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，那么渲染出来的应该是

    旧的

  • b
    • 

  • c
    • 

  • e

    • 新的

  • a
    • 

  • b
    • 

  • c
    • 

  • d

    • 这种情况下的流程：

    对比第一项key都是1，但是内容变了，替换文本

    对比第二项key都是2，但是内容变了，替换文本

    对比第三项key都是3，但是内容变了，替换文本

    第四项key为4是新的，新增

    这个和我们想的就有区别了，因为我们只是想做两步操作，即替换第1个和添加第4个。而现在做了四步操作。

    也许这个例子显得没有那么糟糕，但是想象一下，如果是在一个50项的列表中插入1个新的到头部，那么后面的50项将都会进行dom更新渲染，如果每一项内容是复杂的组件，那么代价更加高昂，而我们其实只是想在第一个元素前插入一条。

    那么如果解决上面的问题呢，其实很简单，我们的列表数据都有唯一的id值，而实际开发中我们列表中一般都会存在这样的唯一值，我们只需要把它复制给key即可。

    那么我们的列表会变成这样

    旧的

  • b
    • 

  • c
    • 

  • e

    • 新的

  • a
    • 

  • b
    • 

  • c
    • 

  • d

    • 这种情况下的流程：

    第一项key为1是新的，新增，节点变成4个

    对比第二项key都是2，内容不变，不处理

    对比第三项key都是3，内容不变，不处理

    第四项key为4，旧的是5，替换节点

    将列表和列表项多带带写成纯组件 为什么？

    我们可能已经习惯这样写列表

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

    在大多数情况下，这样写没有什么问题，reactjs执行速度很快，但是有些情况下，这样写可能成为导致网页卡顿的罪魁祸首。

    每当我们改变组件状态的时候，reactjs都会重建当前组件的整个虚拟dom树，也就是说不管你的state.list是否有改变，整个树都会重建，而这个时候列表的渲染是不必要的，当列表过长，组件状态更新频繁，甚至手机性能不佳的情况下，不断的重新创建虚拟dom树很有可能会导致页面帧数下降。

    PureComponent

    PureComponent和Component没什么什么区别，除了它默认在shouldUpdateComponent里面默认做了浅比较，如果相同，则不会触发更新渲染。

    在reactjs中，数据推荐处理成不可变数据(这里不是指immutable.js，而是说对象始终是不变的，如果数据有变了，必须是新的对象)，配合redux的时候更是如此。所以如果list发生改变时，传入的必然是新的对象，这个时候会触发列表组件更新。

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

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

    当我们列表的子元素是复杂的组建时，我们也应该多带带提取成PureComponent，以避免不必要的渲染，事实上，我觉得大多数组件都可以使用PureComponent替换Component。

    不要在属性上箭头函数

    箭头函数很方便，不仅写法简单还能保持this指向父级作用域。

    为了维护事件处理函数的this，我们经常在组件中看到它类似这样的使用

    {alert(11)} />

    但是这样写会有几个问题

    每次render都会重新创建一个新的函数，浏览器创建和回收对象都会有开销，如果是列表，那么每个列表项都会创建和销毁。

    因为每次render都是传入新的函数，shouldUpdateComponent浅比较必然不相等，会导致PureComponent组件失去应有效果。

    正确的做法

    如果使用了transform-class-properties

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

    或者

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

handleClick = ()=>{
    alert(1)
}
    结束语

    暂时就总结了这些吧，以后有新的心得再更新，欢迎交流留言。

    云服务器 GPU云服务器 优化心得 java的一些代码 深度学习的一些应用 php实用的一些代码

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/91846.html

    相关文章

    • ReactJS 开发过程中的一些使用心得

      摘要：目前开发的项目中为了仿原生效果如果自己去通过重新实现的话成本极大所以不得不使用来作为前端库。可以在这个函数中清理在绑定的事件这个方式很有用。在开发过程中这些生命周期函数是我使用最频繁最常见的操作。 ReactJS作为目前最火的构建用户界面的前端框架，为什么有那么多的前端工程师去追逐它，不仅因为它简单，而且它提供了一系列强大的API让我们摆脱以前繁琐的DOM操作，使我们的逻辑更加清晰，代...

      MangoGoing 评论0 收藏0

    • ReactJS新闻 #21 React Native中更好的列表视图

      摘要：新闻第期新闻中更好的列表视图官方博客近日发表了新的列表组件的消息，三月份的候选版本的中，加入了三种新的与组件，可以针对不同情况需求而使用，这三个新组件的数据来源，都可以对外部的数据流框架或进行搭配使用。目前中的类似功能仍然在草案中。 ReactJS新闻 第021期 (2017.03.26) 新闻 React Native中更好的List Views(列表视图) React Naive...

      FingerLiu 评论0 收藏0

    • CDN使用心得：加速双刃剑

      摘要：文章图片存储在，网速不佳的朋友，请看使用心得加速双刃剑或者来我的技术小站本文以腾讯云平台的服务为例，记录下在个人网站开发和公司项目实战中的对使用的心得便宜没好货。此时，更应该使用来提速。 文章图片存储在GitHub，网速不佳的朋友，请看《CDN 使用心得：加速双刃剑》 或者 来我的技术小站 godbmw.com 本文以腾讯云平台的 CDN 服务为例，记录下在个人网站开发和公司项目实战中...

      番茄西红柿 评论0 收藏0

    • CDN使用心得：加速双刃剑

      摘要：文章图片存储在，网速不佳的朋友，请看使用心得加速双刃剑或者来我的技术小站本文以腾讯云平台的服务为例，记录下在个人网站开发和公司项目实战中的对使用的心得便宜没好货。此时，更应该使用来提速。 文章图片存储在GitHub，网速不佳的朋友，请看《CDN 使用心得：加速双刃剑》 或者 来我的技术小站 godbmw.com 本文以腾讯云平台的 CDN 服务为例，记录下在个人网站开发和公司项目实战中...

      Brenner 评论0 收藏0

    • Reactjs vs. Vuejs

      摘要：上图是二月份前端框架排名，位居第一，排名第三。我们认为前端模板和组件代码是紧密相连的。直到最近看了文档，才发现另有蹊跷。 欢迎大家关注腾讯云技术社区-segmentfault官方主页，我们将持续在博客园为大家推荐技术精品文章哦~ 纪俊，从事Web前端开发工作，2016年加入腾讯OMG广告平台产品部，喜欢研究前端技术框架。 这里要讨论的话题，不是前端框架哪家强，因为在 Vue 官网就已经...

      AaronYuan 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    刘玉平

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <