React版本更新及升级须知(持续更新)

以下内容参考React官方bloghttps://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,关于nullrender,用注释节点来表示

通过<noscript>标签来表示null,在react多应用中带来的性能提升。

 

5,功能性组件允许return一个null

之前无论是无状态组件或者是一个纯函数,都不允许返回一个null,但是15版本允许返回null了。

 

其他可能会涉及到的小的注意点:

React.cloneElement(),修复了如果传入未定义的props会返回未定义的元素,现在会有默认的defaultProps

之前0.14版本已经弃用的方法全部删除,如果引用会报错;

允许data-名称以数字开头的属性等。

 

版本升级注意:总体来说,代码无需改动,不会影响编译,性能会有所提升,但是从15版本开始,React DOM不再支持IE8,解决方案找到两个:

1es5-shimes5-sham

2https://github.com/NervJS/nerv(可兼容到ie7

 

 

 

React V15.4.0

1,分离ReactReact DOM

React包目前只包含和React渲染无关的如React.ComponentReact.createElement()等内容,render则放到了react-dom包中。

 

2,新增React Perf

ReactPerf启动后,可以在Chrome时间轴中查看在组件中花费的时间,包括组件的挂载,更新和卸载

 

版本升级注意:React V0.14中如果使用ReactDOM.render()方法的需要改变,并且render已被分离到react-dom包中,引入时需要注意,其他并无大碍。

 

 

 

React V15.5.0

1React.PropTypes迁移

在开发过程中,常常会用到Proptype验证,React V15.4和之前都是直接从主React对象上访问,但是从15.5版本开始,需要引入prop-types包并从包里导入。

 

2React.createClass不再推荐使用

15.5.0版本开始,React.createClass推荐改为引入create-react-class包,因为ES2015以前并未将类作为语言的一部分,所以暂时使用了React自身提供的React.createClass,然而随着ES2015关于类的引入,JavaScript类现在是在React组件中创建组件的首选方式。

 

其他可能会涉及到的小的注意点:

React.PureComponent来代替react-addons-pure-render-mixinreact-addons-shallow-compare,这两个包之前在性能优化方面会用到。

 

版本升级注意:React.createClass已不再推荐使用,但这时候如果还是用的该方法,也不会报错,但是后续新版本会出错,这个后面会提到;还有就是PropTypes的引入,这个需要改动,其他无影响。

 

 

 

React V15.6.0

style属性中添加对css变量的支持。

 

 

 

React V15.6.2

CSS列不再附加px后缀。

 

 

 

React V16.0

1render函数下的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.7kb6.9kb gzipped)降低到5.3kbgkbip 2.2kb

react-dom包:从141kb42.9kb gzipped)降低到103.7kb32.6kb gzipped

react+react-dom包:从161.7kb49.8kb gzipped)降低到109.7kb34.8kb gzipped

与之前版本相比,相当于缩小了32%gzip30%

 

6componentDidCatch的推出

可以在子组件树种的任何位置捕获js错误,并且记录错误,并且显示备用UI而不是崩溃的组件树,这个相比于从根组件全部卸载的错误处理要更优。

 

其他可能会涉及到的小的注意点:

setStaterender的过程中会导致更新,所以绝对不能在渲染过程中使用setState,以前使用可能不会出错,现在应该会造成栈溢出;

componentDidUpdate不再接收prevContext参数;

React 16依赖于Map类型和Set类型,如果需要支持旧版的浏览器,需要单独引入这两个,可以借助core-js或者babel-polyfill这两个库,用法如下:

 

版本升级注意:15版本升级到16版本,原有的写法不会有问题,但是需要引入mapset语法来支持旧版浏览器,其他就是一些新写法的更新,可以调整代码进行优化,如果不调整也不会有问题。

 

 

 

 

React V16.2

1Fragments的升级

Fragments在上个版本已经支持,但是并未有大的改进,在此版本中,Fragments的升级是一大亮点。先看一段HTML 

 

 

16.0版本以前,如果我们要在Reactrender,唯一的方法是将他们包裹在一个div中,而React V16.0开始支持返回数组形式,则可以写成以下方式:

 

 

 

 

 

需要注意的是,数组中必须以逗号分隔,必须带key属性,字符串必须用引号括起来。 

但是上面这种写法体验不是很好,所以16.2版本推出了Fragment组件(React.Fragment): 

 

当然,也可以用Fragment来包裹其他自定义组件。还有一种写法是用JSX片段语法<></>,但是这种写法是不支持任何属性的,包括key属性,而Fragment目前唯一支持的属性就是key

 

 

 

 

其他可能会涉及到的小的注意点:

如果配合eslint,上面这种JSX Fragments写法需要eslint版本升级到3.xbabel-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