javascript代码实例教程-React实战-Reactjs中的如何通过不可变数据对象提高页面性能

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-React实战-Reactjs中的如何通过不可变数据对象提高页面性能脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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的数据,简化了这种数据变化的判断,也就减少了数据更新导致的页面变化,提高页面性能。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-React实战-Reactjs中的如何通过不可变数据对象提高页面性能全部内容,希望文章能够帮你解决javascript代码实例教程-React实战-Reactjs中的如何通过不可变数据对象提高页面性能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。