关闭

ReactJs性能优化(中)

标签: 性能优化reactjsreact
526人阅读 评论(0) 收藏 举报
分类:

 提到ReactJS性能优化,不得不提immutablejs性能优化神器~ 
Facebook 工程师打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 Helper)。它内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也尽量与 Object 或 Array 类似。

其中有 3 种最重要的数据结构说明一下:(Java 程序员应该最熟悉了)

  • Map:键值对集合,对应于 Object,ES6 也有专门的 Map 对象
  • List:有序可重复的列表,对应于 Array
  • Set:无序且不可重复的列表

首先什么是Immutable Data?

Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。请看下面动画: 
此处输入图片的描述

immutablejs在ReactJS中的运用

上一篇文章中有提到过,通过Object.assign()与PureRenderMixin组合使用来实现ReactJs性能优化,减少不必要的re-render;此时我们有一个更好的方式来减少不必要的re-render,那就是immutableJs.

var map1 = Immutable.fromJS({a:1, b:1, c:{b:{c:{d:{e:7}}}}}); 
var map2 = Immutable.fromJS({a:1, b:1, c:{b:{c:{d:{e:7}}}}}); 
Immutable.is(map1, map2); // true

通常两个对象的比较要进行深比较,性能低下。那immutablejs的性能呢? 
Immutable.is 比较的是两个对象的 hashCode 或 valueOf(对于 JavaScript 对象)。由于 immutable 内部使用了 Trie 数据结构来存储,只要两个对象的 hashCode 相等,值就是一样的。这样的算法避免了深度遍历比较,性能非常好。 
- 与 Redux 搭配使用

import { createStore } from 'redux'; 
import { combineReducers } from 'redux-immutablejs'; 
import Immutable from 'immutable'; 
import * as reducers from './reducers'; 
const reducer = combineReducers(reducers); 
const state = Immutable.fromJS({}); 
const store = reducer(state); 
export default createStore(reducer, store);

  • 组件中引用

shouldComponentUpdate(nextProps) { 
return !this.props.obj.equals(nextProps.obj);

}

小结

Immutable 可以给应用带来极大的性能提升,但是否使用还要看项目情况。由于侵入性较强,新项目引入比较容易,老项目迁移需要评估迁移。对于一些提供给外部使用的公共组件,最好不要把 Immutable 对象直接暴露在对外接口中。

如果 JS 原生 Immutable 类型会不会太美,被称为 React API 终结者的 Sebastian Markbåge 有一个这样的提案,能否通过现在还不确定。不过可以肯定的是 Immutable 会被越来越多的项目使用。

but,依旧会存在immutable 类型无法解决的re-render 问题?看下篇分享

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:91462次
    • 积分:1424
    • 等级:
    • 排名:千里之外
    • 原创:57篇
    • 转载:15篇
    • 译文:0篇
    • 评论:7条
    文章分类