升級react 15.4，常見的錯誤及解決方案

　　最近項目由react0.14.X升級到react 15版本，由於react15仍是作了一些相對大一點的更新的（詳情能夠參考一下個人另外一篇文章關於react15的一點總結），相對；來講react升級以後但react問題並不太多。可是react相應的配置，例如babel，react-hot-loader等相也作了一些升級。放到一塊兒來講問題仍是多一點的。這裏把遇到的一些問題和注意點拿出來給你們分享一下，能避免的坑仍是要儘可能繞開的不是。

　　1、首先react15的包分紅了react和react-dom兩部分分別打包，因此用到react-dom的地方，導入的位置就要換掉了。以下面圖示：

　　2、react，babel是環環相扣的。升級了react以後升級babel是在所不免的過程了，

注意升級的順序，babel->babel-*其餘相關項->babel-core。原有相關依賴項不先行升級的話對babel-core的是有版本要求的，會致使升級失敗。

　　3、升級babel以後，原有babel5的寫法已經被廢棄，因此會報錯：

　　　　ReferenceError: [BABEL] XXXX.jsx: Unknown option: stage(或loose)

babel6只支持presets和plugins兩個屬性了。babel 最新版本babel6的相關配置解析能夠看下這篇文章。此外，若是少引用了某個插件。會有相似下面的報錯：

若是你用到了react-hot-loader實現熱加載的話，會碰見下面的錯誤：　　　　　Module build failed: SyntaxError: index.js: Unexpected token 

　4、

Cannot resolve module 'react/lib/ReactMount'
switch to react-hot-loader 3.x!

剛纔提到的相應配置也要升級，這是比較麻煩的一點。因此react-hot-loader要升級到3.X，不過我發現npm上最新的版本居然也是beta版，但願不會有其餘變更。

　　5、僅僅是把react-hot-loader升級到3.X還不算完，升級完以後react-hot-loader的用法也要有相應改變。此時會有下面的錯誤：

　　不能像原來同樣在webpack中直接加載react-hot-loader：

　　須要從webpack中移除react-hot loader。.barbelrc中增長plugins屬性：react-hot-loader/babel。此處問題比較多，大體應該裝如下預設和插件（babel 最新版本babel6的相關配置解析能夠看下這篇文章，更好理解）：

　　　　

　　6、上面說到的相關配置還有一個，若是你用到react-router的話。一樣須要升級到3.X版本，若是是1.X的版本的寫法也須要作些改變，當遇到下面的錯誤時：

　　

根據hash匹配的路由，不須要本身建立hsitory對象，直接導入react-router 3.X 現有的hashHistory對象便可。

　　7、react15官方文檔中提到，增長了比較人性化的報警和錯誤信息。可是我的認爲有點矯枉過正的感受，下面的warning是確定會看到的：

官方解釋：You are using a non-standard DOM attribute, perhaps to represent custom data. Custom data attributes should always have a data- prefix, as described in https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

也就是說，若是不是dom元素原生的屬性的話，必需要帶上data-，不然認爲是unknown的，就會報警。可是我的認爲如今提這個所謂的規範有點爲時已晚，由於大型的項目都已經比較成熟了，若是爲了這個標準再去修改相應的內容，大部分人應該是不情願的，有種矯枉過正的感受。考慮到你們的反饋，react開發小組的成員已經妥協了，將來的版本會去掉這種校驗。In future versions of React we plan to pass such props 「through」 without the whitelist。

　　八，建議避免bind來綁定this，能夠用箭頭函數來替換。否則babel轉譯的時候會有報錯的狀況。

 

　　以上就是本次項目升級過程當中暫時碰到一些問題，作個總結爲後面的同窗作個參考。對於尚未升級的項目，我的建議暫時不要升級了，畢竟有些配置仍是非穩定版本，等穩定了再動。此次升級我只是在備用分支上作了操做，目前來看仍是比較明智的。在升級的過程當中有好多問題，搜索引擎是不給力的，仍是須要本身摸索的，因此感受有必要總結一下給後來者一個參考，共同窗習提升。