React版本更新及升级须知（持续更新）
以下內容參考React官方blog（https://reactjs.org/blog/all.html），進行了一些總結。從當前項目React版本號V0.14.8開始往后，并未列出所有的React版本更新內容是因為某些更新迭代只是一些細小的bug修復或者是完善，對于我們目前的開發并未有太大影響，所以跳過。
?
React V15.0（不再支持IE8）
1，去除data-reactid屬性
組件mounting時，React內部采用document.createElement來替代innerHTML，之前版本的React是生成一堆HTML字符串，再設置node.innerHTML。當時是因為在那時候所有支持react的瀏覽器中，innerHTML要比createElement速度要快，設置data-reactid也是為了便于react追蹤虛擬DOM節點，配合innerHTML，但是帶來的缺陷就是每次在render的時候，需要給每一個虛擬DOM節點重新綁定這個屬性，實際上是很消耗性能的。但是之后隨著瀏覽器的優化，情況不再如此，使用createElement之后，React速度更快，因此不再需要data-reactid這個屬性，每一個節點都是通過React.createElement這個方法創建出來，所以對所有的節點都有控制權，在渲染時可以構建出直接映射，因此不需要通過綁定reactid來追蹤節點。這是v15版本的最大亮點。
?
2，去除文本節點的多余span標簽
之前版本對于文本節點的渲染，react默認會在文本節點外面添加一層span標簽，比如
<div>hello {this.props.name}</div>，該節點渲染成功時會看到內部出現了兩個span標簽，如果我們在節點內部本身就添加了span標簽，對應的css樣式里也有用span標簽來區分關鍵字樣式，那這樣在渲染時容易導致沖突，而且本身就沒有必要給不需要的節點添加不必要的標簽。因此，React15版本去掉了額外的span標簽。
?
3，全面支持SVG標簽
支持所有由瀏覽器實現的SVG標簽及屬性。
?
4，關于null的render，用注釋節點來表示
通過<noscript>標簽來表示null，在react多應用中帶來的性能提升。
?
5，功能性組件允許return一個null
之前無論是無狀態組件或者是一個純函數，都不允許返回一個null，但是15版本允許返回null了。
?
其他可能會涉及到的小的注意點：
React.cloneElement()，修復了如果傳入未定義的props會返回未定義的元素，現在會有默認的defaultProps；
之前0.14版本已經棄用的方法全部刪除，如果引用會報錯；
允許data-名稱以數字開頭的屬性等。
?
版本升級注意：總體來說，代碼無需改動，不會影響編譯，性能會有所提升，但是從15版本開始，React DOM不再支持IE8，解決方案找到兩個：
1，es5-shim和es5-sham；
2，https://github.com/NervJS/nerv（可兼容到ie7）
?
?
?
React V15.4.0
1，分離React和React DOM
React包目前只包含和React渲染無關的如React.Component和React.createElement()等內容，render則放到了react-dom包中。
?
2，新增React Perf
ReactPerf啟動后，可以在Chrome時間軸中查看在組件中花費的時間，包括組件的掛載，更新和卸載
?
版本升級注意：React V0.14中如果使用ReactDOM.render()方法的需要改變，并且render已被分離到react-dom包中，引入時需要注意，其他并無大礙。
?
?
?
React V15.5.0
1，React.PropTypes遷移
在開發過程中，常常會用到Prop的type驗證，React V15.4和之前都是直接從主React對象上訪問，但是從15.5版本開始，需要引入prop-types包并從包里導入。
?
2，React.createClass不再推薦使用
從15.5.0版本開始，React.createClass推薦改為引入create-react-class包，因為ES2015以前并未將類作為語言的一部分，所以暫時使用了React自身提供的React.createClass，然而隨著ES2015關于類的引入，JavaScript類現在是在React組件中創建組件的首選方式。
?
其他可能會涉及到的小的注意點：
React.PureComponent來代替react-addons-pure-render-mixin和react-addons-shallow-compare，這兩個包之前在性能優化方面會用到。
?
版本升級注意：React.createClass已不再推薦使用，但這時候如果還是用的該方法，也不會報錯，但是后續新版本會出錯，這個后面會提到；還有就是PropTypes的引入，這個需要改動，其他無影響。
?
?
?
React V15.6.0
style屬性中添加對css變量的支持。
?
?
?
React V15.6.2
CSS列不再附加px后綴。
?
?
?
React V16.0
1，render函數下的return類型新增：fragments 和 strings
之前版本每次render后的return都必須用一個div包裹住或者是一個自定義組件，現在不再需要包在一個里面，而是可以直接返回一個數組（數組還是需要添加key屬性，便于diff算法），或者是一個字符串。
?
2，錯誤處理的改變
之前在渲染過程中如果運行出現錯誤，會導致React直接奔潰，甚至會展示出一些錯誤信息在界面上，React 16的錯誤機制是一旦渲染過程中或者生命周期中出現錯誤，整個組件樹會從根目錄下卸載，防止顯示損壞的數據。
?
3，更好的服務器端渲染
服務端渲染是15版本的3倍，配合8.4版本的Node，大概有3.8倍
?
4，支持自定義的DOM屬性
之前版本會直接忽視掉無法識別的HTML屬性，而現在會直接傳遞給DOM，減少文件大小。
?
5，減小文件大小
react包：從20.7kb（6.9kb gzipped）降低到5.3kb（gkbip 2.2kb）
react-dom包：從141kb（42.9kb gzipped）降低到103.7kb（32.6kb gzipped）
react+react-dom包：從161.7kb（49.8kb gzipped）降低到109.7kb（34.8kb gzipped）
與之前版本相比，相當于縮小了32%（gzip的30%）
?
6，componentDidCatch的推出
可以在子組件樹種的任何位置捕獲js錯誤，并且記錄錯誤，并且顯示備用UI而不是崩潰的組件樹，這個相比于從根組件全部卸載的錯誤處理要更優。
?
其他可能會涉及到的小的注意點：
setState在render的過程中會導致更新，所以絕對不能在渲染過程中使用setState，以前使用可能不會出錯，現在應該會造成棧溢出；
componentDidUpdate不再接收prevContext參數；
React 16依賴于Map類型和Set類型，如果需要支持舊版的瀏覽器，需要單獨引入這兩個，可以借助core-js或者babel-polyfill這兩個庫，用法如下：
?
?
版本升級注意：從15版本升級到16版本，原有的寫法不會有問題，但是需要引入map和set語法來支持舊版瀏覽器，其他就是一些新寫法的更新，可以調整代碼進行優化，如果不調整也不會有問題。
?
?
?
?
React V16.2
1，Fragments的升級
Fragments在上個版本已經支持，但是并未有大的改進，在此版本中，Fragments的升級是一大亮點。先看一段HTML：?
?
?
?
在16.0版本以前，如果我們要在React中render，唯一的方法是將他們包裹在一個div中，而React V16.0開始支持返回數組形式，則可以寫成以下方式：
?
?
?
?
?
需要注意的是，數組中必須以逗號分隔，必須帶key屬性，字符串必須用引號括起來。?
但是上面這種寫法體驗不是很好，所以16.2版本推出了Fragment組件（React.Fragment）：?
?
當然，也可以用Fragment來包裹其他自定義組件。還有一種寫法是用JSX片段語法<></>，但是這種寫法是不支持任何屬性的，包括key屬性，而Fragment目前唯一支持的屬性就是key：
?
?
?
?
其他可能會涉及到的小的注意點：
如果配合eslint，上面這種JSX Fragments寫法需要eslint版本升級到3.x，babel-eslint升級到7，在.eslintrc文件中確保添加了? “parser”: “babel-eslint”；
?
版本升級注意：16.2僅僅是在16.0基礎上新增了對Fragment的提升，其它沒有大改動。
?
?
?
?
總結：React從目前版本V0.14.8更新至最新版本V16.2.0，會經歷兩次較大的版本更新，一個是15.0，一個是16.0。
較大的優化是：性能的提升，渲染速度的提升，對異常的處理更優，以及包的大小減小，
帶來的影響是：IE8的不支持（目前有解決方案），部分寫法的廢棄，部分引入包的更改。
?
轉載于:https://www.cnblogs.com/yanchenyu/p/8383593.html
總結
以上是生活随笔為你收集整理的React版本更新及升级须知（持续更新）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux系统管理初步（七）系统服务管理
- 下一篇： 微信小程序------MD5加密（支持中