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, 這樣作的好處就是減小剛進來時渲染的內存消耗，提高渲染速度；