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

当PureComponent遇上ImmutableJS ,让React应用性能发挥到极致

痛点 转载https://wulv.site/2017-08-22/purecomponent-immutablejs.html 在我们的印象中,React 好像就意味着组件化、高性能,我们永远只...
  • sinat_17775997
  • sinat_17775997
  • 2017年09月14日 13:57
  • 320

ReactJS性能优化(上)

shouldComponentUpdate? 详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate?  React已经替我们实现了一个shouldCompo...
  • u012125579
  • u012125579
  • 2016年12月07日 23:10
  • 965

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

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

19、H5新增js属性之js延迟加载

JS的加载会影响后面的内容加载很多浏览器都采用了并行加载JS,但还是会影响其他内容     Html5的defer和async         defer=“defer ”: 延迟加载,会...
  • chuipaopao163
  • chuipaopao163
  • 2016年08月23日 19:13
  • 1446

React-性能优化详解

Reactde Dom diff算法使我们能够在任意时间搞笑的重新绘制整个用户界面,并保证最小程度的DOM改变,然而,也存在需要对组件 进行细致优化的情况,这时就需要渲染一个新的DOM来让应用运行得...
  • limm33
  • limm33
  • 2016年03月21日 17:43
  • 5101

react性能优化

写在前面的话:要想解决问题,首先得找到问题的根源,所以,说起性能分析,还是要从其生命周期和渲染机制说起。1.渲染机制react的组件渲染分为初始化渲染和更新渲染,在初始化渲染的时候会调用根组件下的所有...
  • pedrojuliet
  • pedrojuliet
  • 2017年08月28日 15:45
  • 245

React性能优化 PureComponent 使用指南

为什么使用? 转载https://wulv.site/2017-05-31/react-purecomponent.html React15.3中新加了一个 PureComponent 类,顾...
  • sinat_17775997
  • sinat_17775997
  • 2017年09月14日 13:55
  • 1346

React移动web极致优化

原文地址最近一个季度,我们都在为手Q家校群做重构优化,将原有那套问题不断的框架换掉。经过一些斟酌,决定使用react 进行重构。选择react,其实也主要是因为它具有下面的三大特性。React的特性1...
  • offbye
  • offbye
  • 2016年08月12日 19:19
  • 1388

ReactJs性能优化(中)

提到ReactJS性能优化,不得不提immutablejs性能优化神器~  Facebook 工程师打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 H...
  • u012125579
  • u012125579
  • 2016年12月07日 23:12
  • 656

React同构与极致的性能优化

React同构与极致的性能优化 前言 随着React的兴起, 结合Node直出的性能优势和React的组件化,React同构已然成为趋势之一。享受技术福利的同时,直面技术挑战,在复杂场...
  • huangshulang1234
  • huangshulang1234
  • 2018年01月14日 09:53
  • 173
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactJs性能优化(中)
举报原因:
原因补充:

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