React Native性能优化

作者: ShunQ_Wang | 来源:发表于2017-03-21 10:45 被阅读3696次

前几天看了某位大神的rn视频感触颇深,rn的性能优化道路虽然很艰难,但希望总会是有的。

1.优化Component

很多人在定义一个class时都会去继承Component,这并没有错,但是如果一个子组建也继承了Component,那么当父组建render时也会导致子组建的render,怎么解决呢?其实很简单只需要我们的子组建去继承PureComponent即可。个人建议自定义的class都可以去继承PureComponent从而避免不必要的render。

2.优化方法的创建

内部方法的定义应该使用 onPress=()=>{}. 调用直接this.onPress即可,避免创建多个fun

3.善于使用shouldComponentUpdate

通过shouldComponentUpdate的返回结果我们可以去控制什么时候应该render,什么情况应该render。

4.listview代替scrollview

使用listview我们可以设置首次render时要渲染的ui数量,这样一定程度上优化了首次进入页面时所需要的渲染时间(renderHeader/pagesize)

5.使用InteractionManager

InteractionManager.runAfterInteractions(...)的官方文档说的很清楚,通过他可以处理一些耗时操作,所以我个人建议把网络请求放在次方法中去处理,这样很大程度上可以解决首次进入时的卡顿。

6.使用Animated去处理一些简单的动画

我想应该会有很多小伙伴遇到这样的问题,切换不同的state改变某个view的height/width,是不是很多小伙伴都会用state去控制height/width。并不是说这样是完全不对,只是这样耗费性能,因为你的state的改变会触发render,而对于一个过程来说,这样的render次数是我们不愿意看到的,那该怎么解决呢?其实大家可以使用Animated去代替state,Animated封装了一系列优雅的处理函数,完全可以实现你想要的效果,使用方法官方有介绍。

React Native的优化是一条漫漫长路,可路边总会有一些风景让你觉的终点并不遥远,再次感谢@天地之灵 大神的精彩分享,希望学习rn的小伙伴们共同去探讨,共同去进步。

相关文章

网友评论

  • giants_one:不错
    ShunQ_Wang:@giants_one thks
  • fangkyi03:你说的很多东西 都有局限性 比如purecomponent这个他只能处理浅层的数据 深层数据不能有限的处理 其次interactivemanger.runafterinteractive来说 他的话 如果你的界面有任何一个动画正在进行中 那么都不会运行这个回调 这会导致你的触发时机无法自己把控 其次animated这块的话 并不是所有用了这个的都会有原生加速的效果 只有opation tranform里面的这些才能使用原生加速 listview就不说了0.43以后都用flatlist了
  • ITxiansheng:首页发送网络请求会影响卡顿吗? 发送出请求,异步接受,影响不大吧?
    ShunQ_Wang:在可以接受的范围,其实我建议你去看看UI的渲染速度,然后具体去做优化
  • 2cc6b5825eab:写的很赞!有大神的视频地址吗,可以贴一下,谢谢!
    ShunQ_Wang:rn中文网上有天地之灵大神的视频,你可以去看一下

本文标题:React Native性能优化

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