ReactJs性能优化(中)

原创 2016年12月07日 23:12:44

 提到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 问题?看下篇分享

相关文章推荐

ReactJS性能优化(上)

shouldComponentUpdate? 详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate?  React已经替我们实现了一个shouldCompo...

React组件性能优化

React仅仅专注于UI层;它使用虚拟DOM技术,以保证它UI的高速渲染;它使用单向数据流,因此它数据绑定更加简单;那么它内部是如何保持简单高效的UI渲染呢? React不直接操作DOM,它在内...

ReactJS修炼之路(四):组件的性能优化及开发思路

少年,加油昨天周五,那个喊我“少年”的朋友离职了去新加坡了,我的实习生涯又错过了一位大神,不过短短一个月还是被影响不少,例如入坑happy hacking keybord同时学习各类软件的快捷键,例如...

javascript之Object.assign()痛点

javascript的Object.assign()坑啊

ES6之Object.assign

Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]可以理解为两个Map 合并为一个 map1={0:1,1:2,2:3} map2={0:4,1:5}map2...

react学习总结4--Redux

react 学习总结–Redux、React Redux说明 redux 版本 :”3.6.0” react-redux 版本: “^4.4.6” redux-thunk 版本...

reactjs性能优化之shouldComponentUpdate

性能优化每当开发者选择将react用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?...

ReactJS by Example epub

  • 2017年10月06日 03:48
  • 4.72MB
  • 下载

Angle 3.6 reactjs & seed

  • 2017年06月02日 11:37
  • 3.81MB
  • 下载

初识ReactJS的组件化开发(三):利用ajax渲染电影列表

我们使用zepto库来做ajax请求 安装zepto: 1.cd到项目根目录 2.执行 npm install zepto 然后发现我们的项目中就多了 因为ajax是异步的,所以我们要想成功...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactJs性能优化(中)
举报原因:
原因补充:

(最多只允许输入30个字)