1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| 1. JavaScript线程的性能在开发模式下很糟糕,
2. 使用React Navigation此类工具库来解决页面切换问题
3. 发布版中屏蔽console.log
4. 使用FlatList或SectionList来替代ListView,如果FlatList渲染慢,使用getItemLayout
5. scrollView会一口气将其所有的子组件加载出来,需要合理利用
6. 开发布局时减少View层的嵌套
7. 合理利用shouldComponentUpdate来手动控制当前页面是否重绘,
8. 利用PureComponent,如果state改变过程中做的浅拷贝,将不会做渲染
9. 列表等重复组件设置key,在进行diff算法时,有key将会减少大量的遍历操作
10. 在iOS上,修改Image组件的宽度或者高度,需要重新裁剪和缩放原始图片,性能开销特别大,此时建议使用 transform:[{scale}]
11. 将setState放进setTimeout中延迟到下一轮中进行,能处理很多setState之后卡顿或者无响应的问题
12. 内联引用(require代替import)可以实现文件或模块的懒加载,只有实际用到时才加载,可用于优化首屏渲染速度(比较新的RN源码已经改为了模块按需加载)
13. 保持RN及react-navigation的版本更新,
14. 减少更新或者合并多个更新
15. InteractionManager.runAfterInteractions(()=>{}) 在动画或者操作结束后执行
this.requestAnimationFrame(()=>{}) 在下一帧就立刻执行回调
setNativeProps 直接在低层更新Native组件属性,从而避免渲染组件结构和同步太多试图变化带来的大料开销,虽然带来性能提升,但是会让代码逻辑混乱
16. 使用动画来是变化连贯,提升体验 LayoutAnimation
17. 本地化分包,bundle体积过大会导致加载慢
18. 习惯设置默认值,判断对象是否存在,判断数组长度等操作
19. 导入Redux 或者 Mobx 框架(个人尝试后觉得Mobx框架对性能及易用性提升更显著)
20. 尝试使用Hooks制作函数组件能有效提升性能
|