RN-性能优化 (四)

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

一、优化Component

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

注意子组件需是静态的

二、优化方法的创建

内部方法的定义应该使用

onPress=(()=>{
  do something
})

避免创建多个fun

三、善于使用shouldComponentUpdate

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

注意静态组件可以直接

shouldComponentUpdate(){
  return false
}

四、使用Animated去处理一些简单的动画

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前几天看了某位大神的rn视频感触颇深,rn的性能优化道路虽然很艰难,但希望总会是有的。 1.优化Component...
    ShunQ_Wang阅读 7,486评论 7 19
  • 1. 屏幕适配 RN布局使用的单位是dp,而开发人员从设计稿最方便获取的是px,所以需要一个工具类把px转成dp,...
    哪吒闹海全靠浪阅读 2,094评论 0 3
  • TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成...
    亭止阅读 3,308评论 1 0
  • 公司打算用react-native开发APP,初始RN遇到了很多坑,搭建了一个小的项目框架,结合redux根据公司...
    45b645c5912e阅读 752评论 0 5
  • 一花一世界,一叶一追寻,一曲一场叹,一生嗅一春 ____题记 看到世界的...
    喜旧之人53阅读 359评论 0 5