今日，我們不啖雞湯，不飲雞血
只有干貨——關於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升級就大功告成啦！