• 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的不支持(目前有解决方案),部分写法的废弃,部分引入包的更改

     

  • 相关阅读:
    推荐一款功能强大的js 在线编辑器
    盒子游戏(湖南省第七届大学生计算机程序设计竞赛)
    面试中常问到的称小球问题
    移动开发中的Scheme跳转说明——Allowing OtherApps to Start Your Activity
    uva 10069 Distinct Subsequences(高精度 + DP求解子串个数)
    自适应滤波器(Adaptive Filter)
    软件设计中的同步异步单线程多线程优缺点分析
    iphone关于单倍图和二倍图(导航 背景 变高)
    注解
    Qt Creator项目中使用qss
  • 原文地址:https://www.cnblogs.com/yanchenyu/p/8383593.html
Copyright © 2020-2023  润新知