共计 1894 个字符，预计需要花费 5 分钟才能阅读完成。
今日，我们不啖鸡汤，不饮鸡血
只有干货——关于 React 的优雅升级
双手奉上，来，干了！
-2019 年第 4 期 -
夫 子 说
本次升级基础包情况：react 15.6 -> 16.6
升级流程：
1、升级 React
2、功能测试
OK，下面开始和我一起升级吧~
首先，新拉一个分支，避免“意外事故”的出现~
然后，放手开干。
React 15 到 React 16
用 npm-check 检测一下，用 - u 参数进行交互式 UI 展示。
npm-check 是一款可以在命令行通过图形化界面进行检测 package.json 文件的包有没有版本更新情况的插件，通过使用 npm-check 不仅能够节省时间效率，还能直观的选择特定需要升级的包，另外它还会提供包地址、具体版本信息、当前版本信息等等，是一款不可多得 npm 效率工具。
Good，按上下键选择 react，按一下空格选择，按 enter 就开始安装了。（此处省略安装过程）
安装完成后我可以看到 package.json 文件也更新了，现在的 react 是 16 版本的了：
下面运行 dev 跑起来，出意外的话就不会报错了。
激动 ing…
果然没出意外，下面看一下具体输出。
上面说，这些 dependencies 没有找到，然后列了很多路径。一个关键字眼：react-dom 跃入眼帘
在来看看我的 dom 版本：
居然是 15 版本的，难道是版本不兼容导致的吗，太令人匪思所夷了，不管怎样，我还是升级 dom 试一下吧。
npm-check -u
选择 dom，然后按 enter。
开始安装
安装完成
再次运行 npm run dev 命令：
开始构建，静静等候奇迹的出现吧~
嘘出一口气，终于运行起来了，接下来就是功能测试。
功能测试
一打开首页，不出所料，控制台出错了……
在项目里进行全局搜索，貌似是这句话报了错：
PropTypes 是引用的 prop-types 包，去检查一下这个包的版本：
15 版本的，赶紧升级一下
最新的居然是 15.6 的，希望可以跑起来。
构建完了，再去看看浏览器。
一打开首页，还是有这个错误。
在 stof（stackoverflow）上找到了一个说可能是 eslint 的原因，我升级一下我的 eslint：3.19 -》5.9
【并没有什么用】
来看看 VS 提示
删掉 node_modules 文件夹重新安装然后运行项目。
居然没问题？？！！怎么会这样？？！！难道是 install 成旧版本了吗！！！检查 package.json：
不是啊~ 天呐！不会是 package.json 文件乱套了吧！难道在 dev 环境推上去的也是 16 版本的吗？！
先切换分支检查一下：
谢天谢地并没有。
再切换回去，不相信这个问题莫名其妙就没有了。
首先检查一下 react 的包到底是什么版本的。
看了 react 的包的 package.json 文件，的确是 16 版本的。那么 proptypes 问题是怎样消失不见的呢？
逆反一下之前做的步骤。
首先卸载 @types/prop-types。
发现问题了~ 是页面进错导致没有运行使用 proptypes 相关代码才没报错 …
下面正式开始解决这个问题，温习一遍这个错误：
用了 oneOfType 的只有一个 index.js 文件里：
这个 PropTypes 是引自
根据 react16 官方的文档在 15.5 版本就需要使用 prop-types 使用 proptype 对象：
其官方的示例也跟我项目的代码一致：
那么就应该不是自己项目业务代码的问题了，点击控制台报错代码定位过去，然后在 node_modules 文件夹里找一下啥包用了这个：
原来是 react-style-proptype 用到了，在全局找一下看看哪里使用了这个包：
原来是 react-split-pane 包用到了 react-style-proptype 的 2.0.2 版本，最新的 react-style-proptype 是 3.x 版本。
plit-pane 是 0.x 版本：
升级一下 split-pane：
升级结束后 split-pane 引用了 react-style-proptype 的 3.0.0 版本，在 react-style-proptype 包下的 index 文件可以看到其使用 React.PropTypes 变成了单独的 PropType 对象:
那么我的程序可以正常跑了吗？
并不可以：
用同样的方法定位代码查看 proptype 使用是不是有问题：
（被 any 挡住的是 string）
仍然是 split-pane 报的错，怎么会这样呢？看起来代码有点不一样，难道是没有重新 run 的缘故吗，我重新 run 一下。
果然没错，split-pane 不报错了，但是项目的代码报了错：
全局搜索一下哪里是用这种方式的然后统一替换掉吧！
成功运行啦！
经过测试没有发现致命问题，本次 react 升级就大功告成啦！
