RN 性能优化

时间 2019-12-10

原文原文链接

按需加载: 导出模块使用属性getter动态require

使用Import语句导入模块，会自动执行所加载的模块。若是你有一个公共组件供业务方使用，例如：common.jses6

import A from './A';
import B from './B';
import C from './C';
export {
  A,
  B,
  C
}

业务方想使用common.js中A模块，优化

import {A} from './common.js';

此时，虽然只想引用A模块，但实际B，C模块代码也被执行了。ui

注意：code

若是模块自己使用ES5导出方式,例如module.exports = A，导出方式采用require('./A')引用。模块采用ES6导出方式，例如export default class B {} ，导出方式采用require('./B').default引用

假如A, B, C 都是es6 写法，上面能够优化为component

module.exports = {
    get A() {return(require('./A').default);},
    get B() {return(require('./B').default);},
    get C() {return(require('./C').default);},
};

业务方使用不变内存

懒加载

通常入口文件，会引入全部页面文件，可是咱们首次打开APP的时候，只是须要其中一个便可，这样就会形成首页打开速度会受到影响
这样咱们就须要使用懒加载，使得真正使用的时候，才被引入get

使用ListView/FlatList 代替 ScrollView

这个是老生常谈的，长列表要使用List, 不能直接mapclass

使用PureComponent代替 Component

PureComponent 组件会本身判断旧的props 、 state 和新的是否相同，相同的话，就不会再从新渲染(注意：这里是的比较是浅比较), 至关于实现了 shouldUpdateComponent；
有时候须要本身实现 shouldUpdateComponent，进行深比较props 、 state，减小渲染次数，也要考虑业务以避免更新不了。import

ScrollView中内容过多, 根据偏移量设置渲染内容；

页面要渲染A,B,C,D,E 其中 D, E都在首屏外，能够假如滚动 100偏移，再开始渲染D, E, 这样作的好处就是减小刚进来时渲染的内存消耗，提高渲染速度；require