记一次 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多个)

 

版本升级

版本升级是首先需要思量的问题,若是这个不定的话,其他的事情不方面开展,而版本升级又需要思量多个方面:

  • androidiOS用户各个系统占比是多少?若是安卓和苹果低版本用户太多的话,对rn版本的升级也会有阻力。
  • react native自己版本转变若何?其自己的重构设计进度若何?
  • 第三方库对react native版本有特殊要求?
  • androidiOS方面的构建工具、IDE等是否有特殊要求?原生xcode/Android SDK 版本、安卓和iOS对应的版本号API号等,这些都是需要思量的

经由现实观察以及和原生开发人员相同,最终确定了要更新的版本。由于react native最新版本太新,许多第三方库还没有来得及更新,

第三方库:

由于每个项目差别,用到的第三方库也不一样,然则在原生内里的package.json是最全的,在挨个剖析第三方库的时刻我发现有些库可能最初用到了,由于营业转变,厥后又没有用到,便将那些没有用到的库所有删除,这样可以缩小查找局限,削减事情量。写文档《react-native 各项目设置情形》

接下来是把当前所涉及需要更改的项目使用到的包的最新版本,做一个情形说明表,包罗名称、版本、地址(利便其他人及后续查看)、重大更新等内容。大部门都还好,只有个体库住手维护, 有些由原来的API改为分离出来的第三方库,还好用法基本上没有发生大的改变。

项目熟悉

由于主要是经常改动的谁人项目自己平时接触得对照多,代码基本上都熟悉了,其他的几个项目找测试要相关的账号,找产物负责人领会产物需求,大致跑了一遍之后,也基本上熟悉了代码逻辑。

早期代码由于种种缘故原由,有些重复的地方,还有些可以改善的地方,这个在我得知react native需要升级的时刻便最先着手优化代码了。删除无关的代码,添加注释,抽取公共样式组件等,就当顺带周全熟悉这个项目的代码。 这样的利益是后期升级的话不需要更改那么多代码,也随手简化了代码。

demo初试

为了保险起见,在确定react native版本后,先写了一个包罗所有第三方库的最小demo,每安装一个库,就写项目中用到同样功效的代码,保证基础功效现实可行,并在每一个功效完善之后提交代码到堆栈。

第二篇-用Flutter手撸一个抖音国内版,看看有多炫,使用Flutter开发的抖音国际版

这样一来,若是新安装的谁人库由于更改代码错误导致无法运行APP的话,还可以实时回到上一步。这种情形尤其容易发生在更改android文件夹代码的时刻,究竟一样平常大部门时间都在改JavaScript代码,很多多少刚接触react native时刻踩过的熟悉的坑都忘记得差不多了。

在功效基本上可行之后,在安卓和苹果手机各自大致运行了下,没有什么大的问题,便最先着手正式更改代码。

代码编写

在升级之前,建立新的分支,升级时代新加的需求也暂时差别步更新(新旧功效同时做),待升级竣事,一并更新。

写专用的代码替换文档,利便其他开发参考,削减事情量。在文档中写了新旧代码对比,如导航的跳转传参、引入方式的转变等,可以直接删除源代码,复制粘贴新代码。

这里既包罗几个通用的替换,还包罗几个可能的坑,好比React Native中的图片组件加载静态资源,图片名称含有@2x或@3x报错 。

信息同步

此次升级和原生端密切相关,信息的同步异常主要。

在将0.40到0.59直接的版本更新日志所有看了一遍后,整理成文档,将重点部门标注,让原生那里大致看下有无跟他们关系对照大的地方。有些地方并不是异常懂,需要对方去做个大致的判断。

升级时代实时更新文档,提供所有可能用到的文档。并将整个调研中所有相关文档更新到公司知识治理平台。

测试

列出几个项目中更改到的地方,利便测试重点测试相关的功效。主要功效无误后,测试种种机型,然后就是修bug。时代有遇到一些问题,不外还好,遇到问题多了,大致能看出来是什么情形。

总结

一最先照样对照忧郁的,究竟涉及项目对照多,而且版本跨度这么大,在网上看到的基本上都是小幅度的版本升级。

这次由于整个升级时间对照足够,前期调研准备也对照充实,倒没有泛起对照严重的延迟进度的事情。就是项目营业逻辑对照多,在更改之后有个体小地方被遗漏了,后期才发现这些隐藏的bug

总体来说,基本上更改的代码量不是稀奇多,集中在 react-navigation 路由汇总、跳转传参,以及Flatlist等地方,在和iOS、android等联调方面也花费了不少时间。

由于疫情的缘故,不得不在家办公,然则APP照常更新,这让原本没计划更新升级过的代码不得不随着更新,时代有些暂且发现的bug由于环境差别调试起来对照贫苦。

之前在网上查找了不少文档,多谢网友的分享,这里也总结下自己遇到的情形,希望对人人有所辅助。

 

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

原创文章,作者:28qn新闻网,如若转载,请注明出处:http://www.28qn.com/archives/11551.html