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

     

  • 相关阅读:
    当Django模型迁移时,报No migrations to apply 问题时
    django--各个文件的含义
    django--创建项目
    1013. Battle Over Cities (25)
    1011. World Cup Betting (20)
    1009. Product of Polynomials (25)
    1007. Maximum Subsequence Sum (25)
    1006. Sign In and Sign Out (25)
    1008. Elevator (20)
    1004. Counting Leaves (30)
  • 原文地址:https://www.cnblogs.com/yanchenyu/p/8383593.html
Copyright © 2011-2022 走看看