記一次 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因為環境不同調試起來比較麻煩。

之前在網上查找了不少文檔，多謝網友的分享，這裡也總結下自己遇到的情況，希望對大家有所幫助。