【react native】React Native 性能优化建议

更新时间:2020-03-20    来源:Action    手机版     字体:

【www.bbyears.com--Action】

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.组件粒度化
如何更好的划分组件粒度,这需要合理的对组件进行更细粒度的划分,区分出静态组件及动态组件

React Native 劣势:

1.扩展性仍然远远不如web,也远远不如直接写Native code(这个不用废话解释了吧)
2.从Native到Web,要做很多概念转换,势必造成双方都要妥协。最终web要用一套CSS的阉割版,Native要费劲地把这个阉割版转换成native原生的表达方式(比如iOS的Constraint\origin\Center等属性),两边都会不爽。

本文来源:http://www.bbyears.com/flash/88399.html

热门标签

更多>>

本类排行