RN-性能优化 (一)

作者: 精神病患者link常 | 来源:发表于2017-04-25 16:27 被阅读628次

前人种树后人乘凉
原文地址

一、异步逐层渲染。

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

六、组件粒度化

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

相关文章

  • RN-性能优化 (一)

    前人种树后人乘凉原文地址 一、异步逐层渲染。 React Native 虽然一直标榜媲美Native的体验,但实际...

  • RN-性能优化 (二)

    前人种树后人乘凉原文地址 自从React Native出世,虽然官方一直尽可能的优化其性能,为了能让其媲美原生Ap...

  • RN-性能优化 (三)

    前人种树后人乘凉原文地址 你需要了解什么是帧 在你的祖父辈,它们一般把视频称为”移动的图片”的一个原因是:视频中逼...

  • RN-性能优化 (四)

    前人种树后人乘凉原文地址 一、优化Component 很多人在定义一个class时都会去继承Component,这...

  • iOS性能优化 - 整理

    本文主要包含: 性能优化 - 卡顿性能优化 - 耗电优化性能优化 - APP启动优化安装包瘦身 一  性能优化 -...

  • iOS 性能优化

    ios性能优化(一)ios性能优化(二)ios性能优化(三)

  • Android性能优化 - 消除卡顿

    性能优化系列阅读 Android性能优化 性能优化 - 消除卡顿 性能优化 - 内存优化 性能分析工具 - Tra...

  • Android性能优化 - 内存优化

    性能优化系列阅读 Android性能优化 性能优化 - 消除卡顿 性能优化- 内存优化 性能分析工具 - Trac...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

网友评论

    本文标题:RN-性能优化 (一)

    本文链接:https://www.haomeiwen.com/subject/vmvvzttx.html