1.优化Component

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

2.优化方法的创建

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

3.善于使用shouldComponentUpdate

通过shouldComponentUpdate的返回结果我们可以去控制什么时候应该render，什么情况应该render。确保组件在渲染之后不需要再更新的，即静态组件，尽量在其中增加shouldComponentUpdate方法,防止二次消耗所产生的性能消耗.

如上第一点，逐层渲染提升打开时间，但是也会导致component重复渲染，也就是执行了大量无用的diff算法。虽然React里引以为傲的diff算法非常高效，但是执行数量达到一定程度后，也会带来非常大的影响。那么可使用 shouldComponentUpdate 来控制component的渲染次数。

如何做？

如果确定该组件渲染完后无需再次更新，即这个组件是一个静态组件，那么可以直接return false。

shouldComponentUpdate(){return false}

如果组件比较复杂，自己对RN的更新机制不太熟，可以直接Minxi一下React提供的 PureRenderMixin 组件

mixins: [React.addons.PureRenderMixin]

手动实现或使用第三方组件库，比如 Immutable-js

说白了，就是要确定组件内的不可变数据，让其不再执行diff及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封装了一系列优雅的处理函数，完全可以实现你想要的效果，使用方法官方有介绍。

7. 数据类型的优化

场景：基本上每个页面都需要加载和渲染数据，如果页面列表数据结构复杂,有时刷新数据时state中的未必有修改，但是遇到这样的语句this.setState({data:samedata}) ,界面却被重新render.

原因：这是react-native的生命周期，当你调用setState时，总是会触发render的方法。

优化数据问题：可以使用shouldComponentUpdate生命周期方法，此方法作用是在props或 者state改变且接收到新的值时，则在要render方法之前调用。此方法在初始化渲染的时候不会调用，在使用forceUpdate方法的时候也不会。所以在这个方法中我们可以增加些判断规则来避免当state或者props没有改变时所造成的重新render.

但仅仅做这层判断是不够的，如果是一个列表的对象，例如下面的例子：

这里即使使用了shouldComponentUpdate中的判断，但却一直返回true，导致还会执行render。所以必须对对象所有的键值进行进行比较才能确认是否相等。这里推荐使用facebook自家的immutablejs。一个不可变数据类型的库。使用后可以直接使用一下的写法达到我们之前的目的(即使是对象都可以完美的做比较)。修改后代码如下：

immutablejs其他的具体用法请见: http://facebook.github.io/immutable-js/

8.key

key是react的一个特殊的属性，它是给React自己用的。如果我们动态地创建 React 元素，而且 React 元素内包含数量或顺序不确定的子元素时，我们就需要提供 key 这个特殊的属性。（包括ListView 和 ScrollView）。

我们知道，当组件的属性发生了变化，其 render 方法会被重新调用，组件会被重新渲染。但是在渲染之前，react都会进行diff，确保高效率的渲染，而这个唯一的key就很好的为每一个react组件确定了id。React会比较更新前后的元素 key 值，如果相同则更新，如果不同则销毁之前的，重新创建一个元素。

9.渲染性能低效

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

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

10.setNativeProps

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

建议频繁更新的操作，如tabs切换操作时,需要更新改tab的style，则可以使用该属性

11.不要使用阴影效果

React Native 里面的 shadow 相关的样式，是非常耗性能的css属性。这在web上，以前android 2.0年代，也是一样耗性能的css属性之一。如果需要使用阴影效果，建议使用图片来代替反而性能更好一些。

12. 最小化DOM

React Native里虚拟dom结构越复杂，则越低效。感觉RN的渲染性能，和以前android2.x时代没多大区别，如果层级结构大于5级，则要考虑下优化了。这没啥技巧，纯靠经验及硬实力。