React Native 效能優化指南【全網最全，值得收藏】
阿新 • • 發佈：2020-01-09
2020 年談 React Native，在日新月異的前端圈，可能算比較另類了。文章動筆之前我也猶豫過，但是想到寫技術文章又不是趕時髦，啥新潮寫啥，所以還是動筆寫了這篇 React Native 效能優化的文章。
本文談到的 React Native 效能優化，還沒到修改 React Native 原始碼那種地步，所以通用性很強，對大部分 RN 開發者來說都用得著。
本文的內容，一部分是 React/RN/Android/iOS 官方推薦的優化建議，一部分是啃原始碼發現的優化點，還有一部分是可以解決一些效能瓶頸的優秀的開源框架。本文總結的內容你很少在網路上看到，所以看完後一定會有所收穫。如果覺得寫的不錯，請不要吝嗇你的贊，把這篇 1w 多字的文章分享出去，讓更多的人看到。
看文章前要明確一點，一些優化建議並不是對所有團隊都適用的。有的團隊把 React Native 當增強版網頁使用，有的團隊用 React Native 實現非核心功能，有的團隊把 React Native 當核心架構，不同的定位需要不同的選型。對於這些場景，我在文中也會提一下，具體使用還需要各位開發者定奪。
目錄：
- 一、減少 re-render
- 二、減輕渲染壓力
- 三、圖片優化那些事
- 四、物件建立呼叫分離
- 五、動畫效能優化
- 六、長列表效能優化
- 七、React Native 效能優化用到的工具
- 八、推薦閱讀
一、減少 re-render
因為 React Native 也是 React 生態系統的一份子，所以很多 React 的優化技巧可以用到這裡，所以文章剛開始先從大家最熟悉的地方開始。
對於 React 來說，減少 re-render 可以說是收益最高的事情了。
1️⃣ shouldComponentUpdate