React版本更新及升级须知（持续更新）

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 18.0px "PingFang SC Semibold"; color: #000000 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "PingFang SC"; color: #000000 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "Helvetica Neue"; color: #000000; min-height: 12.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #000000 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "Helvetica Neue"; color: #000000 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "PingFang SC Semibold"; color: #000000 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "PingFang SC Semibold"; color: #ee220c }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "Helvetica Neue"; color: #000000; min-height: 13.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: right; font: 11.0px "PingFang SC Semibold"; color: #000000 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: right; font: 11.0px "Helvetica Neue"; color: #000000 }
span.s1 { font: 18.0px "Helvetica Neue" }
span.s2 { font: 18.0px "PingFang SC" }
span.s3 { font: 11.0px "Helvetica Neue" }
span.s4 { }
span.s5 { font: 14.0px "PingFang SC" }
span.s6 { font: 11.0px "PingFang SC" }
span.s7 { font: 11.0px "Helvetica Neue"; text-decoration: underline }
span.s8 { font: 11.0px "PingFang SC"; color: #000000 }

以下内容参考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的不支持（目前有解决方案），部分写法的废弃，部分引入包的更改。