厌伴老儒烹瓠叶,强随举子踏槐花。这篇文章主要讲述网上摘录React Native APP性能优化相关的知识,希望能为你提供帮助。
1、JS的单线程所有的事件处理,API请求,等操作都在这个线程上,在this.setState
大量数据时,状态的变动会导致re-render,这期间所有由javascript 控制的动画都会出现卡顿掉帧。
比如在切换路由时,帧数会有明显抖动。此时如果有一些在componentDidMount
执行的操作就会使得路由过渡动画非常卡顿。
2、开发环境性能比生产环境差开发环境下框架会有很多别的操作比如warning error 的输出,类型检测等等。
如果要测试性能,最好在release
包测试。这样更加精准。
3、生产环境移除console.*开发时,会有很多console.*
指令来帮助调试。并且一些依赖库也会有console.*
这些语句对javaScript 线程来说是一个极大的消耗。可以通过Babel 在生产环境中移除掉console.*
。
- 安装插件
npm i babel-plugin-transform-remove-console --save-dev
- 配置
.babelrc
文件
{ "env": { "production": { "plugins": ["transform-remove-console"] } } }
4、处理大量数据列表式使用< FlatList/>
FlatList
组件更加适合来展示长列表,并且指定合适的
getItemLayout
方法,
getItemLayout
会跳过渲染Item 时的布局计算,直接使用给定的配置(详情查看链接??)5、依赖懒加载在框架执行编写好的业务代码前,需要把在内存中加载并解析代码,代码量越大这个过程就更耗时,导致首屏渲染速度过慢。而且往往会出现一些页面或者组件根本不会被用户访问到。这时可以通过懒加载来优化。
import xxx from ‘./xxxx‘let test2; export default class Test extent Componnet {getTest2 = ()=> { // 对test2模块进行懒加载(延迟加载),以提高性能 if(test2 === undefined) { test2 = require(‘./xxxx/test2‘); } } }
6、优化组件渲染次数React 在内部
state
或者外部传入的props
发生改变时,会重新渲染组件。如果在短时间内有大量的组件要重新渲染就会造成严重的性能问题。这里有一个可以优化的点。- 使用
PureComponent
让组件自己比较props
的变化来控制渲染次数,实践下来这种可控的方式比纯函数组件要靠谱。或者在Component
中使用shouldComponentUpdate
方法,通过条件判断来控制组件的更新/重新渲染。 - 使用
PureComponent
时要注意这个组件内部是浅比较状态,如果props
的有大量引用类型对象,则这些对象的内部变化不会被比较出来。所以在编写代码时尽量避免复杂的数据结构 - 细粒度组件,拆分动态/静态组件。需要在项目稳定并有一定规模后来统一规划。
- 学习 immutable-js
比如上面提到路由切换时
componentDidMount
中的操作会导致卡顿,这里可以使用
InteractionManager.runAfterInteractions()
将需要执行的操作放到runAfterInteractions
的回调中执行。componentDidMount() { InteractionManager.runAfterInteractions(() => { // your actions }) }
需要注意的是
InteractionManager
是监听所有的动画/交互 完成之后才会触发
runAfterInteractions
中的回调,如果项目中有一些长时间动画或者交互,可能会出现长时间等待。所以 由于
InteractionManager
的不可控性,使用的时候要根据实际情况调整。在react-native 中的一些动画反馈,比如
TouchableOpacity
在触摸时会响应
onPress
并且 自身的透明度会发生变化,这个过程中如果
onPress
中有复杂的操作,很可能会导致组件的透明反馈卡顿,这时可以将onPress
中的操作包裹在
requestAnimationFrame
中。这里给出一个我的实践(利用styled-component)import styled from ‘styled-components‘export const TouchableOpacity = styled.TouchableOpacity.attrs({ onPress: props => () => { requestAnimationFrame(() => { props.onPressAsync & & props.onPressAsync() }, 0) } })``
这里把
onPress
改成在
requestAnimationFrame
的回调中执行onPressAsync
传入的操作。同理,还在
FlatList
的onReachEnd
实践了这个操作,来避免ios 中滚动回弹时执行操作的卡顿。8、为同层级的相同类型的组件设置key值【网上摘录React Native APP性能优化】对于同层级的相同类型的组件,要给每个组件指定唯一的key值。例如通常我们在一个容器组件中创建多个子组件的时候,我们会把这些子组件放在一个数组里,然后把数组直接放到容器页面中,形如下面的伪代码:
banner = ()=> { let childArr = []; while(let i < 10) { childArr.push(< Child key={XXXXXX}> < /Child> ) } return < View> {childArr} < /View> }
Child组件的key一定要有,这涉及到diff算法的原理,diff算法是按层级进行比较的,当前的virtual DOM 和之前的virtual DOM进行同层级比较的时候,对于属于同一个父组件的同一层级的子组件,如果没有key值的话,RN需要遍历该父组件的所有子组件来行进对比,才能知道哪一个子组件发生了改变,这样如果子组件的数量很大的时候会很耗性能,RN有可能会因为遍历的耗时而选择放弃对比来重新渲染所有的子组件,但是如果有key值的话可以利用key直接进行两两比较,效率就高出很多。感谢各位网友的无私分享。
推荐阅读
- MPAndroidChart简单使用
- SAP ABAP, Fiori, Android和Hybris里的异步操作
- Web服务架构详解图解
- SOAP和RESTful Web服务之间的区别
- Web服务的特征
- Redis与其他键值存储区有什么不同()
- Redis与Memcached有什么区别(答案在这里。。。)
- Redis事务处理实例详解
- Redis教程介绍