React Native性能优化

前几天看了某位大神的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的小伙伴们共同去探讨,共同去进步。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native 是一种基于 React 的跨平台移动应用开发框架,其性能受到多种因素的影响。以下是一些优化 React Native 应用性能的建议: 1. 减少渲染次数。React Native 的渲染是基于虚拟 DOM 的,因此组件的更新会引起重新渲染。减少组件的更新次数可以减少渲染次数。可以使用 shouldComponentUpdate 或 PureComponent 来避免不必要的渲染。 2. 使用 FlatList 或 SectionList。FlatList 和 SectionList 是 React Native 的内置组件,它们可以帮助减少渲染次数和内存使用。它们可以按需渲染列表项,而不是一次性渲染所有列表项。 3. 使用动画。React Native 提供了一些内置的动画组件和 API,可以让应用的界面更加流畅和生动。使用动画时,应尽量避免在渲染期间执行操作,以免影响性能。 4. 使用原生组件。React Native 允许开发者使用原生组件来替代一些 React Native 内置组件,以提高性能。例如,使用原生 ScrollView 替代 React Native 的 ScrollView。 5. 使用性能监测工具。React Native 提供了一些性能监测工具,例如 React Native Performance Monitor 和 Reactotron,可以帮助开发者分析应用的性能瓶颈,从而进行针对性的优化。 6. 使用代码分割。React Native 应用可以使用代码分割来减少应用的首次加载时间。可以使用 React Native 的内置代码分割工具或第三方工具进行代码分割。 7. 使用缓存。React Native 应用可以使用缓存技术来减少网络请求和数据处理的次数,从而提高应用的性能。可以使用内置的 AsyncStorage 或第三方缓存库来实现缓存。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值