记一次 React Native 大版本升级过程——从0.40到0.59

去年把公司几个react native 相关的项目升级了下，已通过去一段时间了，这里系统整理下以前的整个过程。react

背景

以前到公司的时候发现公司用的仍是0.40的版本，据了解，当时项目作的比较早，导航用的是自带的路由库，状态管理用的是 mobx。到公司以前虽然有react native的相关经验，不过当时官方已经推荐用 react-navigation 替代原来的导航库。之前的项目比较小，也没用到状态管理，react-native-code-push也没有用过，只是了解过一些。android

刚开始接手项目的时候仍是比较痛苦的，业务逻辑相比以前的复杂很多，有些代码并不彻底知道是什么意思，动也不敢动。不过通过一段时间后，基本上也算是熟悉了react native周边生态. 连着作了好几期需求后算是大体明白了，幸亏当时不是createClass的旧写法，否则改造起来更麻烦了。json

由于用的版本比较早，而安卓高版本又作了一些限制，这致使有时候调试起来比较麻烦，我自带的旧手机由于系统版本比较低（Android 6.0），成了惟一的测试机（版本高一点的无法摇一摇进行调试）。react-native

这卡得不要不要的手机，让我既爱又恨。爱是由于能够调试，不用像iOS同样IP地址变了还得打包，恨是由于，调试很是话费时间， 你有时候均可以看到页面在过渡的效果，若是你看过《疯狂动物城》的话，你应该还记得那个树懒。 react native 自带的列表性能又很差，而项目里面又很多用到列表的地方，复杂的业务需求让导航库难以使用，我的调试也很是麻烦。xcode

技术调研

由于涉及到的项目比较多，并且版本跨度又比较大，因此调研必需要更加认真、全面。工具

我把互联网上近一年来关于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由于环境不一样调试起来比较麻烦。

以前在网上查找了很多文档，多谢网友的分享，这里也总结下本身遇到的状况，但愿对你们有所帮助。