RN-性能优化 (一)

前人种树后人乘凉http://www.jianshu.com/p/11f38925f5ad
原文地址

一、异步逐层渲染。

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

二、实现shouldComponentUpdate方法

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

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

shouldComponentUpdate(){    return false}

三、使用setNativeProps方法

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

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

 //修改文本输入框的 属性值      this.refs.textInputRefer.setNativeProps({        editable:false      });//修改文本输入框的 style      this.refs.text2.setNativeProps({        style:{          color:'blue',          fontSize:30        }      });

四、不要使用阴影效果

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

五、最小化DOM

React Native里虚拟dom结构越复杂，则越低效。如果层级结构大于5级，则要考虑下优化了。这没啥技巧，纯靠经验及硬实力。

六、组件粒度化

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