[转]React Native 性能优化总结二

原文地址

1. 异步逐层渲染。

React Native 虽然一直标榜媲美Native的体验，但实际使用下来，其渲染性还是非常低效，基于ScrollView和ListView两大容器，在渲染上，相当于web端的table布局，需要等整个大table渲染完成才显示页面，也就是说，当容器内有大量的子元素，其白屏时间会非常长。

如何让React Native做到像web端边渲染边加载？可以采用异步渲染的方式，使用requestAnimationFrame 或 setTimeout 定时将单个组件push进ScrollView容器。

基于这个原理，写了个逐层渲染的组件： react-progressive

2. 实现shouldComponentUpdate方法

如上第一点，逐层渲染提升打开时间，但是也会导致component重复渲染，也就是执行了大量无用的diff算法。虽然React里引以为傲的diff算法非常高效，但是执行数量达到一定程度后，也会带来非常大的影响。那么可使用 **shouldComponentUpdate **来控制component的渲染次数。

如何做？

• 如果确定该组件渲染完后无需再次更新，即这个组件是一个静态组件，那么可以直接return false。

shouldComponentUpdate(){
  return false
}

• 如果组件比较复杂，自己对RN的更新机制不太熟，可以直接Minxi一下React提供的 PureRenderMixin组件

mixins: [React.addons.PureRenderMixin]

• 手动实现或使用第三方组件库，比如 Immutable-js

说白了，就是要确定组件内的不可变数据，让其不再执行diff及render。

3. 使用setNativeProps方法

setNativeProps方法可以理解为web的直接修改dom。使用该方法修改 View、 Text等 **RN自带的组件 **，则不会触发组件的componentWillReceiveProps、 shouldComponentUpdate、 componentWillUpdate等组件生命周期中的方法。

建议频繁更新的操作，如slider、tabs切换等拖曳操作时，使用 setNativeProps来更新属性，会获得意想不到的性能体验。

代码片段：

me.refs.tabView.setNativeProps({
  style : {
    height : 0,
    opacity : 0
  }
});

性能分析工具： React.addons.Perf

4. 不要使用阴影效果

React Native 里面的 shadow相关的样式，是非常耗性能的css属性。这在web上，以前android 2.0年代，也是一样耗性能的css属性之一。如果需要使用阴影效果，建议使用图片来代替反而性能更好一些。

5. 最小化DOM

React Native里虚拟dom结构越复杂，则越低效。感觉RN的渲染性能，和以前android2.x时代没多大区别，如果层级结构大于5级，则要考虑下优化了。这没啥技巧，纯靠经验及硬实力。

6.组件粒度化

如何更好的划分组件粒度，这需要合理的对组件进行更细粒度的划分，区分出静态组件及动态组件。