React Native引入immutable优化性能

S所有的操作都是通过Native端的js线程执行，单线程执行，优化性能的一个方向就是降低js的负载。

Imutualble概念：顾名思义，对象一旦被创建便不能更改，对immutable对象的修改添加删除都会返回一个新的immutable对象，同时为了避免deepCopy的性能损耗，immutable引入了Structural Sharing（结构共享），如果对象只是一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点共享。官方地址：https://facebook.github.io/immutable-js/

Immutable优点：

（1）降低了Mutual带来的复杂度
（2）节省内存
（3）Undo/Redo，Copy/Paste，甚至时间旅行这些功能做起来小菜一碟
（4）并发安全
（5）拥抱函数式编程

应用：

（1）shouldComponentUpdate()中的deepCompare
熟悉 React 的都知道，React 做性能优化时有一个避免重复渲染的大招，就是使用 shouldComponentUpdate()，但它默认返回 true，即始终会执行 render() 方法，然后做 Virtual DOM 比较，并得出是否需要做真实 DOM 更新，这里往往会带来很多无必要的渲染并成为性能瓶颈。

react的组件渲染分为初始化渲染和更新渲染。在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染，如下图（绿色表示已渲染，这一层是没有问题的）：

 

Paste_Image.png

但是当我们要更新某个子组件的时候，如下图的绿色组件（从根组件传递下来应用在绿色组件上的数据发生改变，Redux通过Provider传递给子组件）：

图片描述

我们的理想状态是只调用关键路径上组件的render，如下图：

图片描述

但是react的默认做法是调用所有组件的render，再对生成的虚拟DOM进行对比，如不变则不进行更新。这样的render和虚拟DOM的对比明显是在浪费，如下图（黄色表示浪费的render和虚拟DOM对比）

图片描述

Tips:

拆分组件是有利于复用和组件优化的。
父组件如果返回false，则不对子组件生成新的虚拟DOM进行对比。

所以：写好每个组件的shouldComponentUpdate()方法，可以避免子组件DOM的生成以及对比。

我们可以实现一个baseCommponent类，实现shouldComponentUpdate()：

export default class BaseComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (!Immutable.is(thisProps, nextProps) || !Immutable.is(thisState, nextState)) {
      return true;
    }
    return false;
  }
}

所有的组件不在继承Commponent，而是继承这个baseCommponent；

（2）reducer中的deepCopy
immutable深拷贝时有性能优势，reducer中对旧数据的深拷贝我们可以这样写：

export default function DLTHistoryList(state = defaultUserState, action) {
  switch (action.type) {
    case types.DLTHISTORYLIST_REFRESHLIST:
      return state.merge(Immutable.fromJS({
        isRefreshing: false,
        historyItems: action.payload.latestTwentyItems,
        hasNextPage: action.payload.latestTwentyItems.length >= 20,
        isEmpty: action.payload.latestTwentyItems.length <= 0,
        awardRankArray: action.payload.awardRankArray,
      }));
    default:
      return state;
  }
}

注意：
由于 Redux 中内置的 combineReducers 和 reducer 中的 initialState 都为原生的 Object 对象，所以不能和 Immutable 原生搭配使用。幸运的是，Redux 并不排斥使用 Immutable，可以自己重写 combineReducers或使用 redux-immutablejs 来提供支持。
使用很简单：
将 import { combineReducers } from 'redux'; 替换为 import { combineReducers } from 'redux-immutable';

总结

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

参考

https://github.com/Pines-Cheng/blog/issues/3
https://github.com/camsong/blog/issues/3