RN 性能优化

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

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

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模块代码也被执行了。

注意：

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

假如A, B, C 都是es6 写法，上面可以优化为

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

业务方使用不变

懒加载

一般入口文件，会引入所有页面文件，但是我们首次打开APP的时候，只是需要其中一个即可，这样就会造成首页打开速度会受到影响

这样我们就需要使用懒加载，使得真正使用的时候，才被引入

使用ListView/FlatList 代替 ScrollView

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

使用PureComponent代替 Component

PureComponent 组件会自己判断旧的props 、 state 和新的是否相同，相同的话，就不会再重新渲染(注意：这里是的比较是浅比较), 相当于实现了 shouldUpdateComponent；

有时候需要自己实现 shouldUpdateComponent，进行深比较props 、 state， 减少渲染次数，也要考虑业务以免更新不了。

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

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