React Native 性能优化

以下观点是对腾讯技术分享大会的提到的优化方式进行总结并加以个人理解

一. JS方面优化，目的是为了让加载更快，滚动更流畅，响应更灵敏

    1.加载速度方面，主要解决数据加载的问题。第一个方式是进行数据缓存。第二个是减少数据的请求，这个可以通过数据复用来解决，比如组件之间通过数据交互减少对数据的请求。第三个是异步加载

    2.滚动方面主要是列表的滚动优化，第一种方式是在通过组件钩子函数在页面渲染前判断是否需要进行更新，避免造成不必要的性能浪费。第二种是ListView组件，官方提供了一些优化方法，比如减少首次渲染的行数，使用户更快的看到数据，确定没帧渲染的行数，超出屏幕外的数据进行处理等等

    3.响应速度方面，主要解决导航跳转响应慢，触摸反馈速度慢的问题。第一种方式是通过动画来解决。怎么解决呢，其实就一个思路，在进行复杂的逻辑处理前，优先播放动画。第二种方式还是渲染前规避掉不必要的渲染，比如进行一个按钮点击更换背景色的操作，虽然只是更新按钮的背景色，但是依然会受到整个组件的数据影响，这个时候把不必要的渲染去掉会大大提升响应速度。规避的方式还可以通过单独剥离按钮，把颗粒度尽量减小。第三种方式是通过refs直接操作DOM，不走rn的渲染流程

二. native端的优化

    主要是jsbundle文件装载的时间过长导致的问题，所以这里又两个方向，第一个是减少装载时间，第二个是减小jsbundle的体积。减少装载时间，可以通过缓存jsbundle文件提示速度。也可以提前装载，适用于原生嵌RN的APP使用。减少体积的方式也有两种，第一个是增量更新，第二个是分包，jsbundle里分成两个部分，第一部分是rn自带的base，第二部分才是业务代码biz，分成两块后只需更新biz的代码即可