React-Native性能优化点

shouldComponentUpdate

确保组件在渲染以后不须要再更新的,即静态组件,尽可能在其中增长shouldComponentUpdate方法,防止二次消耗所产生的性能消耗css

shouldComponentUpdate() {
    //彻底静态的组件,无需更新 
    return false;
}

key

key是react的一个特殊的属性,它是给React本身用的。若是咱们动态地建立 React 元素,并且 React 元素内包含数量或顺序不肯定的子元素时,咱们就须要提供 key 这个特殊的属性。(包括ListView 和 ScrollView)。html

咱们知道,当组件的属性发生了变化,其 render 方法会被从新调用,组件会被从新渲染。可是在渲染以前,react都会进行diff,确保高效率的渲染,而这个惟一的key就很好的为每个react组件肯定了id。React会比较更新先后的元素 key 值,若是相同则更新,若是不一样则销毁以前的,从新建立一个元素。react

渲染性能低效

基于ScrollView和ListView两大容器,在渲染上,至关于web端的table布局,须要等整个大table渲染完成才显示页面,也就是说,当容器内有大量的子元素,其白屏时间会很是长。web

采用异步渲染的方式,减小首屏加载的数据,实现数据懒加载,使用requestAnimationFrame 或 setTimeout 定时将单个组件push进ScrollView容器。性能优化

setNativeProps

使用该方法修改 View 、 Text 等 RN自带的组件 ,则不会触发组件的componentWillReceiveProps 、 shouldComponentUpdate 、 componentWillUpdate 等组件生命周期中的方法。dom

建议频繁更新的操做,如tabs切换操做时,须要更新改tab的style,则可使用该属性。异步

代码片断:布局

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

最小化DOM

相似于html,React Native里虚拟dom结构越复杂,则越低效。性能

不要使用阴影效果

React Native 里面的 shadow 相关的样式,是很是耗性能的css属性优化

参考文章:
React Native 性能优化建议

相关文章
相关标签/搜索