reactnative性能优化总结
rn性能优化 结合⽹上资料总结如下
1、⾸屏渲染问题。采⽤JS Bundle拆包解决。就是主体框架react单独打成⼀个基础包，⼀旦进⼊app就马上加载，⽽相关业务模块单独拆分成多个包，进⼊相应模块才动态加载。这样可以⼤⼤加快APP的启动速度，各个业务也能独⽴开发，各⾃维护、下载、更新
2、图⽚问题。rn开发时本地图标为了统⼀往往放在js端，极端时（如⼀个页⾯加载⼏⼗上百张图⽚）可能会有性能问题。这是因为如果资源从javascript 包中加载， RN 需要先从包中拿到资源，然后通过bridge把资源传送到 原⽣UI 层去渲染。⽽如果资源已经存在在原⽣端，那么React 可以直接告知 UI 层去渲染具体的图⽚，⽆需通过这个bridge引⼊或者转⼊图⽚资源。 当然不会有这类问题，但是要js端图⽚要注意压缩，使其不太⼤，图⽚越⼤，性能问题越容易凸显。webP，jpg优先
3、缓存。各种需要的，有必要的缓存，如⼀个⽣⽇⽇期选择picker组件，数据源⼤概有100(年)x12(⽉)x30(天)这么多条数据，如果每次弹出picker都需要计算这些数据，还是会稍微有点延迟，这⾥可以缓存下来，甚⾄本地数据存储起来，以后拿出来直接使⽤
4、延迟加载。页⾯打开，优先执⾏那些跟页⾯展⽰有关的代码，其他的如埋点，上传状态，gif动画都可
以稍后执⾏。对那些触摸响应事件后才需要展⽰的组件，或者根据接⼝返回才能决定是否展⽰的组件，⼀开始甚⾄都可以不⽤import，直到确定要展⽰时才局部import导⼊组件展⽰。对长列表页⾯，图⽚较多时，在页⾯范围之外的图⽚可以先不展⽰，直到滚动后发现图⽚在屏幕上⾯显⽰了再展⽰
5、动画。普通动画如移动，缩放等直接使⽤LayoutAnimation，性能更好。复杂点的动画才使⽤Animated。对帧动画这种需要快速更新state 触发动画的场景，可以使⽤setNativeProps直接修改原⽣属性（某些场合如背景动画，gif图⽚可能不是很好的选择，因为gif可能会很⼤，导致初次解压时出现明显卡顿现象，⽽且安卓上gif图⽚⾸轮显⽰效果不佳）。
Animated： useNativeDriver为true，则会⼀次性将动画信息发送给原⽣端让原⽣去驱动动画，性能更佳。 否则js端会不断注册定时器事件，让原⽣端不断回调js⽅法更改组件的setNativeProps值产⽣动画，因为动画配置信息在每⼀帧都在原⽣和js端通信性能有所损耗，
问题： 为什么不总是使⽤useNativeDriver？ 是因为有些动画原⽣不⽀持么？
reactnative开发6、响应速度。由于js是单线程，当在执⾏⼀些计算量很⼤的任务时可能会造成堵塞卡顿现象。此时可以将任务稍微延后执⾏，避免⼤量任务在同⼀个js 事件循环中导致其他任务⽆法执⾏。相应的⽅法有InteractionManager,requestAnimationFrame,setTimeOut(0)等，原理都⼤同⼩异
7、刷新问题。每次setState导致的render都会进⾏⼀次内存中diff计算，尽管diff效率很⾼(O(n))，但是还是应该避免不必要的diff。 Pure组件、⾃定义shouldComponentUpdate实现避免不必要的刷新
8、预加载。对⼀些重要的，很可能会⽤到的内容预先加载，例如图⽚浏览器，当浏览某⼀张图⽚时可以预加载前后两张图⽚，优化⽤户体验。
9、FlatList的优化。
页⾯中的重头戏FlatList，尽管经过了⼤量优化，在数据较多时使⽤还是需要注意的。
FlatList的频繁刷新问题很常见，如下⾯

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。