React Native性能优化(一)

爱被打了一巴掌 2022-01-22 08:11 350阅读 0赞

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

# 一、异步逐层渲染。 #

> 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级，则要考虑下优化了。这没啥技巧，纯靠经验及硬实力。

# 六、组件粒度化 #

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

[Link 1]: http://www.ghugo.com/react-native-high-performance/?utm_source=tuicool&utm_medium=referral