記一次 React Native 大版本升級過程——從0.40到0.59

去年把公司幾個react native 相關的項目升級了下，已通過去一段時間了，這裏系統整理下以前的整個過程。

背景

以前到公司的時候發現公司用的仍是0.40的版本，據瞭解，當時項目作的比較早，導航用的是自帶的路由庫，狀態管理用的是 mobx。到公司以前雖然有react native的相關經驗，不過當時官方已經推薦用 react-navigation 替代原來的導航庫。之前的項目比較小，也沒用到狀態管理，react-native-code-push也沒有用過，只是瞭解過一些。

剛開始接手項目的時候仍是比較痛苦的，業務邏輯相比以前的複雜很多，有些代碼並不徹底知道是什麼意思，動也不敢動。不過通過一段時間後，基本上也算是熟悉了react native周邊生態. 連着作了好幾期需求後算是大體明白了，幸虧當時不是createClass的舊寫法，否則改造起來更麻煩了。

由於用的版本比較早，而安卓高版本又作了一些限制，這致使有時候調試起來比較麻煩，我自帶的舊手機由於系統版本比較低（Android 6.0），成了惟一的測試機（版本高一點的無法搖一搖進行調試）。

這卡得不要不要的手機，讓我既愛又恨。愛是由於能夠調試，不用像iOS同樣IP地址變了還得打包，恨是由於，調試很是話費時間， 你有時候均可以看到頁面在過渡的效果，若是你看過《瘋狂動物城》的話，你應該還記得那個樹懶。 react native 自帶的列表性能又很差，而項目裏面又很多用到列表的地方，複雜的業務需求讓導航庫難以使用，我的調試也很是麻煩。

技術調研

由於涉及到的項目比較多，並且版本跨度又比較大，因此調研必需要更加認真、全面。

我把互聯網上近一年來關於react native的博客文章所有看了一遍（谷歌+百度+GitHub +技術QQ羣的方式），並針對性的蒐集了關於升級踩坑的博文，又把作rn以來收集到的相關技術博客都翻開看了下。 儘可能作到無死角全方面覆蓋網上目前全部相關的內容。

而後彙總了一篇 react-native升級調研文檔，主要包括API變動，幾個重大更新的日誌、這次升級有關的重要點、涉及到的幾個庫、可能須要考慮的一些問題、參考資料連接（40多個）

 

版本升級

版本升級是首先須要考慮的問題，若是這個不定的話，其餘的工做不方面開展，而版本升級又須要考慮多個方面：

• android和iOS用戶各個系統佔比是多少？若是安卓和蘋果低版本用戶太多的話，對rn版本的升級也會有阻力。
• react native自己版本變化如何？其自己的重構計劃進度如何？
• 第三方庫對react native版本有特殊要求？
• android和iOS方面的構建工具、IDE等是否有特殊要求？原生xcode/Android SDK 版本、安卓和iOS對應的版本號API號等，這些都是須要考慮的

通過實際調查以及和原生開發人員溝通，最終肯定了要更新的版本。由於react native最新版本太新，不少第三方庫尚未來得及更新，

第三方庫：

由於每一個項目不一樣，用到的第三方庫也不同，可是在原生裏面的package.json是最全的，在挨個分析第三方庫的時候我發現有些庫可能最初用到了，由於業務變化，後來又沒有用到，便將那些沒有用到的庫所有刪除，這樣能夠縮小查找範圍，減小工做量。寫文檔《react-native 各項目配置狀況》

接下來是把當前所涉及須要更改的項目使用到的包的最新版本，作一個狀況說明表，包括名稱、版本、地址（方便其餘人及後續查看）、重大更新等內容。大部分都還好，只有個別庫中止維護， 有些由原來的API改成分離出來的第三方庫，還好用法基本上沒有發生大的改變。

項目熟悉

由於主要是常常改動的那個項目本身日常接觸得比較多，代碼基本上都熟悉了，其餘的幾個項目找測試要相關的帳號，找產品負責人瞭解產品需求，大體跑了一遍以後，也基本上熟悉了代碼邏輯。

早期代碼由於各類緣由，有些重複的地方，還有些能夠改進的地方，這個在我得知react native須要升級的時候便開始着手優化代碼了。刪除無關的代碼，添加註釋，抽取公共樣式組件等，就當順帶全面熟悉這個項目的代碼。 這樣的好處是後期升級的話不須要更改那麼多代碼，也順手簡化了代碼。

demo初試

爲了保險起見，在肯定react native版本後，先寫了一個包含全部第三方庫的最小demo，每安裝一個庫，就寫項目中用到一樣功能的代碼，保證基礎功能實際可行，並在每個功能完善以後提交代碼到倉庫。

這樣一來，若是新安裝的那個庫由於更改代碼錯誤致使沒法運行APP的話，還能夠及時回到上一步。這種狀況尤爲容易發生在更改android文件夾代碼的時候，畢竟平常大部分時間都在改JavaScript代碼，好多剛接觸react native時候踩過的熟悉的坑都忘記得差很少了。

在功能基本上可行以後，在安卓和蘋果手機各自大體運行了下，沒有什麼大的問題，便開始着手正式更改代碼。

代碼編寫

在升級以前，創建新的分支，升級期間新加的需求也暫時不一樣步更新（新舊功能同時作），待升級結束，一併更新。

寫專用的代碼替換文檔，方便其餘開發參考，減小工做量。在文檔中寫了新舊代碼對比，如導航的跳轉傳參、引入方式的變化等，能夠直接刪除源代碼，複製粘貼新代碼。

這裏既包括幾個通用的替換，還包括幾個可能的坑，好比React Native中的圖片組件加載靜態資源，圖片名稱含有@2x或@3x報錯 。

信息同步

這次升級和原生端密切相關，信息的同步很是重要。

在將0.40到0.59直接的版本更新日誌所有看了一遍後，整理成文檔，將重點部分標註，讓原生那邊大體看下有無跟他們關係比較大的地方。有些地方並非很是懂，須要對方去作個大體的判斷。

升級期間及時更新文檔，提供全部可能用到的文檔。並將整個調研中全部相關文檔更新到公司知識管理平臺。

測試

列出幾個項目中更改到的地方，方便測試重點測試相關的功能。重要功能無誤後，測試各類機型，而後就是修bug。期間有遇到一些問題，不過還好，遇到問題多了，大體能看出來是什麼狀況。

總結

一開始仍是比較擔憂的，畢竟涉及項目比較多，並且版本跨度這麼大，在網上看到的基本上都是小幅度的版本升級。

此次由於整個升級時間比較充足，前期調研準備也比較充分，倒沒有出現比較嚴重的耽誤進度的事情。就是項目業務邏輯比較多，在更改以後有個別小地方被遺漏了，後期才發現這些隱蔽的bug。

整體來講，基本上更改的代碼量不是特別多，集中在 react-navigation 路由彙總、跳轉傳參，以及Flatlist等地方，在和iOS、android等聯調方面也花費了很多時間。

由於疫情的緣故，不得不在家辦公，可是APP照常更新，這讓原本沒打算更新升級過的代碼不得不隨着更新，期間有些臨時發現的bug由於環境不一樣調試起來比較麻煩。

以前在網上查找了很多文檔，多謝網友的分享，這裏也總結下本身遇到的狀況，但願對你們有所幫助。