频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
React实战-Reactjs中的如何通过不可变数据对象提高页面性能
2017-11-30 20:06:42         来源:超期服役软件开发者的博客  
收藏   我要投稿

React实战-Reactjs中的如何通过不可变数据对象提高页面性能。

在使用ReactJs之后,我们知道Reactjs的UI更新方式,由于props或者state的数据变化都将导致页面的render,而ReactJs是组件化的,小组件组装成大组件,大组件组装成页面,每个组件都有自己的内部数据,任何的数据变化都将引起页面重绘,尽管有虚拟Dom,依然对性能存在较大的影响,不可变数据的应用大大的减少了这种影响,提高了重绘的次数。

1.在ReactJS中的数据对象

在ReactJS 中主要是props 和state:

  • props是不可变的

    props在子组件构造时由父组件传人子组件或自定义初始值,在子组件中不能改变props的值,只能读取:采用this.props.name。

    父组件定义:

    子组件设定初始值:getDefaultProps。

    • state是可变的

      state是在组件内部运用的,由getInitialState()进行初始化创建。在组件内部均可改变。改变的方式是this.setState()。

      2.如何在Reactjs中减少render

      那么如何在reactjs中减少render提高性能呢,主要还是从props和state入手。在Reactjs中只要state变化或者props变化,都会重新render,这里的变化并非值值真多变了,即使是相同的值,因为重新输入了,也会导致render。因此reactjs提供了一个函数以阻止render:shouldComponentUpdate。

      我们需要在state和props有新值的时候进行判断,是否需要render,如果不需要,则返回false。如下:

      shouldComponentUpdate: function(nextProps, nextState) {

      return nextProps.id !== this.props.id;

      }

      3.如何简单快捷的判断是否需要render

      从上面我们可以看出reactjs提供了阻止render的方法,但是如何快速判断是否需要render依然是个问题,因为判断一个复杂的数据对象是否跟之前的值是否相同并不容易。

      Redux将这个问题极简化了,整个应用共用一个state。但也带来了更复杂的问题,就是state的结构可能非常复杂,如果判断是否更新呢?Redux又一次极简了,那就是采用不可变数据。

      我们在判断数据是否相同时,并不需要深入判断数据对象的值是否相同,只需要浅比较即可,也就是判断是否为同一个数据对象地址,因为不可变数据对象在数据变化时均会重新创建一个新的数据对象,数据对象的地址不会相同。这也就是为什么在Reactjs,Redux中才有不可变数据对象。

      4.如何创建不可变数据对象

      不可变数据对象可以自己去定义和维护,也可以采用第三方类库。

      a.自己定义和维护不可变数据对象也很简单,只需要记住数据的更新将产生新的数据对象,而不是在原有对象上进行数据操作。

      b.如果采用第三方,则可以采用immutable类库。使用也很简单,可参考官网:https://facebook.github.io/immutable-js/。

      1)加入类库

      nam install immutable

      2)引入类库,并使用

      var Immutable = require('immutable');

      var map1 = Immutable.Map({a:1, b:2, c:3});

      var map2 = map1.set('b', 50);

      map1.get('b'); // 2

      map2.get('b'); // 50

      以上代码可以看出map2是新创建的数据对象,与传统的map操作不同。

      3)需要注意的地方

      在使用Immutable时,我们需要注意的是:immutable虽然支持 List, Stack, Map, OrderedMap, Set, OrderedSet 和 Record,但用法存在区别,具体还说看官网说明吧。

      5.总结

      在reactjs中页面的更新围绕着数据而来,不再是我们主动去操作页面的Dom,然而由于组件化的嵌套,会导致很多无谓的页面更新,我们需要减少这些更新,判断数据是否变化。在React,redux中采用了immtable的数据,简化了这种数据变化的判断,也就减少了数据更新导致的页面变化,提高页面性能。

点击复制链接 与好友分享!回本站首页
上一篇:NodeJS+Angular+MongodbWeb开发
下一篇:JavaScript开发教程之基础知识学习
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站