博客 技能get,React的优雅升级!

技能get,React的优雅升级!

   包袋鼠   发表于 2021-11-25 17:10  300  0

今日,我们不啖鸡汤,不饮鸡血

只有干货——关于React的优雅升级

双手奉上,来,干了!


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/01c82c3a68f2a72139be837e184b4913..jpg


-2019年第4期-


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/d5bcb708975583569f2ec8a14bb93425..jpg

本期夫子:古一

袋鼠云  前端开发工程师


夫 子 说


本次升级基础包情况:react 15.6 -> 16.6

升级流程:

1、升级React

2、功能测试

OK,下面开始和我一起升级吧http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/8f27c27345a8393a8e3dfd38cdd4d9a9..jpg



http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/080be51e6a58d8a0d34e6497438a5703..jpg


首先,新拉一个分支,避免“意外事故”的出现~


data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==


然后,放手开干。


React 15 到 React 16


用npm-check检测一下,用-u参数进行交互式UI展示。


npm-check是一款可以在命令行通过图形化界面进行检测package.json文件的包有没有版本更新情况的插件,通过使用npm-check不仅能够节省时间效率,还能直观的选择特定需要升级的包,另外它还会提供包地址、具体版本信息、当前版本信息等等,是一款不可多得npm效率工具。


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/66d46d942a0f12aedb6e5df5f7d2758a..jpg


Good,按上下键选择react,按一下空格选择,按enter就开始安装了。(此处省略安装过程)


安装完成后我可以看到package.json文件也更新了,现在的react是16版本的了:


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/29659e00ffc1056fc6193d69fdca0479..jpg

下面运行dev跑起来,出意外的话就不会报错了。


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/122743266fd66412b2a870e203d28517..jpg

激动ing...


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/3df03a9775081c178cefded80c0e9ffb..jpg


果然没出意外http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/d899a8a1622bc471879002cd573a881b..jpg
,下面看一下具体输出。

上面说,这些dependencies没有找到,然后列了很多路径。一个关键字眼:react-dom 跃入眼帘

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/0f65fc42beec045ddac5f9a3be78baaa..jpg

在来看看我的dom版本:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/0e8c397cc3e8762869f411eade81c4bc..jpg

居然是15版本的,难道是版本不兼容导致的吗,太令人匪思所夷了,不管怎样,我还是升级dom试一下吧。

npm-check -u

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/0c824f026ad901b4de820ee1d3708feb..jpg

选择dom,然后按enter。

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

开始安装

安装完成

再次运行npm run dev命令:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/b2c87eab86c19c07120553a7c8a64e1a..jpg

开始构建,静静等候奇迹的出现吧~

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/2481115d8c04427a90af7327984ce1b6..jpg

嘘出一口气,终于运行起来了,接下来就是功能测试。


功能测试


一打开首页,不出所料,控制台出错了http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/3606c489e61757fb1c382433bedf50dc..jpg


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/8983e13197fa673958acc1aed9e7a7a1..jpg

在项目里进行全局搜索,貌似是这句话报了错:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/08d0229ab5834afdfc0805b110755fb9..jpg

PropTypes是引用的prop-types包,去检查一下这个包的版本:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/a1e917ce8bda1ae30e8f99256828c981..jpg

15版本的,赶紧升级一下

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/45c654b1c57121f7009dec1a1e74de9e..jpg

最新的居然是15.6的,希望可以跑起来。

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

构建完了,再去看看浏览器。

一打开首页,还是有这个错误。

在stof(stackoverflow)上找到了一个说可能是eslint的原因,我升级一下我的eslint:3.19 -》 5.9

【并没有什么用】

来看看VS提示


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/9e44e6dac194a1421be9c422d699e47f..jpg

删掉node_modules文件夹重新安装然后运行项目。

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/a3ad19da3bd36e2f064ee5f2f40b6372..jpeg


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/ccf920cf9d1175a63b7e580fb75735a1..jpg

居然没问题??!!怎么会这样??!!难道是install成旧版本了吗!!!检查package.json:

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

不是啊~天呐!不会是package.json文件乱套了吧!难道在dev环境推上去的也是16版本的吗?!

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/15c4c8e821134ff0fdca96000ecd6aac..jpg

先切换分支检查一下:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/f2ab3e34af0ac0e4e4d1471d35031860..jpg

谢天谢地并没有。

再切换回去,不相信这个问题莫名其妙就没有了。

首先检查一下react的包到底是什么版本的。


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/eeeaade6a0ebd61171590e16fd5396a8..jpg

看了react的包的package.json文件,的确是16版本的。那么proptypes问题是怎样消失不见的呢?

逆反一下之前做的步骤。

首先卸载@types/prop-types。

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

发现问题了~是页面进错导致没有运行使用proptypes相关代码才没报错...data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

下面正式开始解决这个问题,温习一遍这个错误:


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/a27a2c79ba4156b00954229590678f9a..jpg

用了oneOfType的只有一个index.js文件里:


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/917b90558d8da5876962273fd7828a92..jpg

这个PropTypes是引自

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

根据react16官方的文档在15.5版本就需要使用prop-types使用proptype对象:

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

其官方的示例也跟我项目的代码一致:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/b3315d22db296630ffc66f48244037db..jpg

那么就应该不是自己项目业务代码的问题了,点击控制台报错代码定位过去,然后在node_modules文件夹里找一下啥包用了这个:


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/5d10109106e5b46fe7a456d96c97c731..jpg

原来是react-style-proptype用到了,在全局找一下看看哪里使用了这个包:


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/81114b8f7055fbde76f3f32c0a0127c6..jpg

原来是react-split-pane包用到了react-style-proptype的2.0.2版本,最新的react-style-proptype是3.x版本。

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/68c625b0288339ee8d12e027e2d5b375..jpg

plit-pane是0.x版本:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/1954c1d4cec0672151af8d4a2e17f0af..jpg

升级一下split-pane:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/205fb36705ae84518486c527783503f8..jpg

升级结束后split-pane引用了react-style-proptype的3.0.0版本,在react-style-proptype包下的index文件可以看到其使用React.PropTypes变成了单独的PropType对象:


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/dd515265f53778108c99fe1eaa87d55c..jpg

那么我的程序可以正常跑了吗?

并不可以:


http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/99c85419d29b4e64242f3dce82a9f13d..jpg

用同样的方法定位代码查看proptype使用是不是有问题:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/d0ae197e4a493803a9af62054a2e6205..jpg

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/83ed0cf7a87458636ce8a4ecd4944e72..jpg

(被any挡住的是string)

仍然是split-pane报的错,怎么会这样呢?看起来代码有点不一样,难道是没有重新run的缘故吗,我重新run一下。

果然没错,split-pane不报错了,但是项目的代码报了错:

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/6f41a93ab8721e45655f904b618e4d36..jpg

全局搜索一下哪里是用这种方式的然后统一替换掉吧!

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/e5ae31d945cd57f88ccc60f82554785d..jpg

成功运行啦http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/5e0ff1763d23688d033a27e4662c3d96..jpg

经过测试没有发现致命问题,本次react升级就大功告成啦http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user9/article/8f27c27345a8393a8e3dfd38cdd4d9a9..jpg

0条评论
社区公告
  • 大数据领域最专业的产品&技术交流社区,专注于探讨与分享大数据领域有趣又火热的信息,专业又专注的数据人园地

最新活动更多
微信扫码获取数字化转型资料
钉钉扫码加入技术交流群