返回 登录
10

React v15.0 正式版发布

原文: React v15.0
作者: Dan Abramov
译者: 孙薇
责编: 钱曙光,关注架构和算法领域,寻求报道或者投稿请发邮件qianshg@csdn.net,另有「CSDN 高级架构师群」,内有诸多知名互联网公司的大牛架构师,欢迎架构师加微信qshuguang2008申请入群,备注姓名+公司+职位。

首先感谢React社区在issue tracker系统中针对最终测试版本(RC版本)所报告的问题与版本回退情况。在过去几周里,我们修复了这些问题,更新了两个RC版之后,我们很高兴宣布:发布React 15的最终稳定版。

在此提醒,主要版本号的更新代表着上一个主要版本的React已经在生产环境中使用了很久,而这次所发布的15.0版本是继0.14版本之后发布的,新版本将承续我们从2013年以来所执行的语义化版本。值得注意的是:我们不再主动支持IE8了,目前React的运作方式会继续下去,但如有任何只影响IE8的新问题,其修复的优先级将会是最低的。

React 15在与DOM的交互方式上做出了重大改进:

  • 在安装组件时,现在我们用document.createElement来代替innerHTML设置,从而不再需要在各个节点上使用data-reactid属性,让DOM更加轻量级。使用document.createElement之后,React在现代浏览器上的运行速度也较之前更快,并修复了大量与SVG元素相关,以及在同一个页面上运行多个React副本的边缘情况。

  • 之前我们对SVG的支持并不完整,缺失很多标签和属性。在React 15中,我们听从了使用者的呼声,增加了对SVG属性的支持,目前所有浏览器可识别的SVG属性都在其中。如果漏掉了哪些属性,烦请告知我们。使用document.createElement还有额外的好处,我们无需再维护SVG标签列表了,在React 15中,之前不支持的SVG标签应该都没问题了。

  • 关于这个版本,React社区作出了一些惊人的贡献,尤其要强调Michael Wiencek所做的pull request,多亏了他的努力,React 15不再在文本中生成额外的<span>节点,使得DOM的输出结果更加干净。由于这个问题已经存在很久了,React的用户在接纳这个外部贡献时十分欢欣鼓舞。

不止针对这个版本:我们理解,为了获得更多类似Michael这样的社区贡献,我们需要以更公开的方式与用户交流我们的目标及优先级安排,并查阅更多的pull request。第一步,我们会恢复对React核心团队周会记录的发布。我们还打算引入基于Ember RFCs的RFC进程,以方便外部贡献者能够洞见React开发中未来更多的内容及可能的影响。这篇博客会继续保持更新。

在本文中,我们还实验了一种新的changelog格式,将所有变更与相应的pull request链接,并注明其作者,请读者告知我们该模式是否有效。

升级指南

与以往一样,作为主版本发布(即大版本更新)的React 15将不再支持某些9个月前在React 0.14中提示过要删除的内容。每次修改都很艰难:在Facebook的代码库中,React的组件超过2万个,还没算React Native的。因此,我们尽量将修改内容打散,逐渐完成,以便减少改动中的痛苦。

如果你的代码在运行React 0.14时并未收到警告,那么升级到React 15应当轻而易举。本次发布的大部分内容实际上都是后台部分的,影响React与DOM的交互方式。其它重要的变更包括:现在React支持全部的SVG元素与属性了。另外,我们还做了大量优化改进,以及旨在协助开发者的额外警告,还对核心部分做了一些基础优化,以便在未来版本中提供某些新功能。

详情请参见下文的changelog部分。

安装

推荐在npm中使用React,并使用类似browserify或者webpack之类的工具来打包代码。安装这两个包:

  • npm install --save react react-dom

记住:默认情况下,在开发模式中React会运行额外的检查,并提供很有帮助的警告提示。在部署到自己的应用前,将NODE_ENV环境变量设置到生产环境中,以使用React的生产版本。生产版本不包含开发模式所具备的警告,但运行速度更快。

如果你没有使用npm,我们也提供预构建的浏览器版本,对于在Bower中使用的react package也是适用的。

React

React with Add-Ons

React DOM

Changelog

主要变更

  • 加入了document.createElement,取消了data-reactid

    关于与DOM的交互方式,出现了很多巨大的改动。最显著的变化之一在于:我们不再为每个DOM节点设置data-reactid属性了,尽管在查看网页是否使用React时会有些麻烦,但会令DOM更加轻量级。此外在变更后,在最初的渲染中也能使用document.createElement了。以前,我们要生成一大堆HTML字符串,再设置node.innerHTML。当时是因为,这种做法比在大多我们支持的实例和浏览器中使用document.createElement速度更快,之后随着浏览器的优化,情况不再如此,使用createElement之后,React速度更快。使用id将事件映射回React组件,代表着尽管存在着大量的缓存数据,每个事件仍要完成一堆的工作。我们都有这样的经历:缓存,尤其是无效缓存很容易导致出错,结果就是这些年来出现了一大堆难以复现的问题。现在,由于对节点有了控制权,在渲染时我们可以构建出直接映射。

    注意:在服务器渲染内容中,还会存在data-reactid,不过会比以前少得多,自动递增的序号也会更简单。

    作者@spicyj,pull request链接 #5205

  • 取消额外的<span>
    在DOM交互中还有一项大变化,就是我们渲染文本模块的方式。之前你可能注意到了:React在渲染时会假如很多额外的<span>,比如我们主页上最基本的一个样例:渲染<div>Hello {this.props.name}</div>,会出现2个<span>标记。现在渲染后,纯文本节点与用于界定的注释节点交错排列。这样做之后,就无需再创建额外的嵌入节点,也能对个别的文本片段执行更新了。由于依赖所生成标记的用户很少,此项修改的影响面也会很小。不过,如果你在CSS中使用了这些<span>作为对象的话,可能需要做出相应的调整。不过在组件中,你随时可以执行渲染。

    作者@mwiencek,pull request #5753

  • 渲染返回null目前改成了注释节点

    我们也利用注释节点修改了null,这个功能是在React 0.11中加入的,通过渲染<noscript>元素而实现。在改用注释节点渲染后,有些CSS可能会指向错误的对象,特别在使用了:nth-child时。在React中,<noscript>标记的运用一直被看作是React指向DOM方式的实现细节。由于这些细节并没有相关依赖,我们认为可以在这一版中直接作出修改,而无需先发一个版本让大家体验其中细微的差异。此外在很多主要应用中,我们已经看到了这些变化对React的性能带来的提高。

    作者@spicyj,pull request链接 #5451

  • 函数组件也可返回null

    在React 0.14中,我们增加了对定义无状态组件为函数的支持。然而,在React 0.14中我们仍可以在不需扩展React.Component或使用React.createClass()的情况下,对类组件进行定义,因此我们无法确定这个组件是类组件还是函数组件;并且在0.14版本中,类组件是不会返回null的。这个问题在React 15中得到了解决,现在可以从任何组件——无论是类组件或者函数组件返回null了。

    作者@jimfb,pull request链接 #5884

  • 改进对SVG的支持

    现在React将完全支持所有的SVG标签(不常见的SVG标签不会出现在React.DOM元素助手中,不过JSX和React.createElement适用于所有的标签名),并支持浏览器实现的所有SVG属性。如果有漏掉的属性,欢迎告知

    作者@zpao,pull request链接 #6243

关键性变动

  • 取消额外的<span>

    DOM结构的变更值得再次重申,特别是关于<span>的变化。在更新Facebook代码库的过程中,我们发现有少量的代码依赖React生成的标记。其中一些案例是诸如WebDriver之类的集成测试,其他的都是通过ReactDOM.renderToStaticMarkup进行简单测试和标记对比。尽管变更很少,但我们希望大家心里有数。我们鼓励大家在升级时运行测试套件,并在可能的情况下考虑替代选项。在某些案例中这个办法可能奏效:在你的render方法中使用<span>

    作者@mwiencek,pull request链接 #5753

  • React.cloneElement()现在包括defaultProps

    我们修复了React.cloneElement()中的bug。如果cloneElement()接收到的某些propsundefined的,常返回带有未定义值的元素。在React 15中,我们将其修改为与createElement()保持一致。现在任何发送给cloneElement()的未定义props都有相应的组件defaultProps了。在2万个React组件中,只有一个受到了负面影响,因此我们放心地发布了这个变更,而没有将其保留,等待下一次发布。

    作者@truongduy134,pull request链接 #5997

  • ReactPerf.getLastMeasurements()晦涩不明

    变更并未影响应用,但可能会影响到一些第三方工具。我们正在改进ReactPerf的实现,并计划在15.x版本中发布相关改进。这个内部性能测量的格式有计划改动,我们暂时将ReactPerf.getLastMeasurements()的返回值视为模糊的数据结构,用户不应对其生成依赖。

    作者@gaearon,pull request链接 #6286

  • 删除的内容

    • 在9个月前的v0.14版本中,这些内容已经被标记为将要移除的内容:
      React顶层输出中移除的API包括:findDOMNoderenderrenderToStringrenderToStaticMarkup以及unmountComponentAtNode。在此提醒,这些API现在在ReactDOMReactDOMServer中可用。

      作者@jimfb,pull request链接 #5832

    • 移除的插件包括:batchedUpdates以及cloneWithProps

      作者@jimfb,pull request链接 #5859;作者@zpao,pull request链接 #6016

    • 移除的组件实例方法包括:setPropsreplaceProps以及getDOMNode

      作者@jimfb,pull request链接 #5570

    • CommonJS react/addons入口点也不再使用,在此提醒:可以使用单独的react-addons-*软件包来替代,不过只适用于使用CommonJS软件包时。

      作者@gaearon,pull request链接 #6285

    • children发送给类似<input>之类的空元素的做法被取消了,现在改成抛出异常。

      作者@jonhester,pull request链接 #3372

    • 在DOM refs(例如this.refs.div.props)中使用React-specific属性的做法也被删除了。

      作者@jimfb,pull request链接 #5495

下一版的取消功能提示,请注意

在新的警告发布前,这些变更的内容都可以正常使用,直到React 16才会修改,因此你可以陆续对代码执行升级。

  • 由于使用率过低,LinkedStateMixinvalueLink将会被废弃掉。如果你需要相应功能,可以使用wrapper组件来实现同样的功能:react-linked-input

    作者@jimfb,pull request链接 #6127

  • React的未来版本中会将<input value={null}>作为请求来清除输入内容。然而,React 0.14版本中忽略了value={null},在React 15中,如果输出值为空,则会发出警告并要求你写明目的。要想消除警告,可以发送空字符串清除受约束的输入内容,或者发送undefined让输入内容不受约束。

    作者@antoaravinth,pull request链接 #5048

  • ReactPerf.printDOM()被重新命名为ReactPerf.printOperations(),而ReactPerf.getMeasurementsSummaryMap()则被重新命名为ReactPerf.getWasted()

    作者@gaearon,pull request链接 #6287

新的警告/提醒(可能会有帮助)

  • 如果你使用精简后的开发版,React DOM会提示你使用速度更快的生产版。

    作者@spicyj,pull request链接 #5083

  • React DOM:在指定没有单位的CSS值为字符串时,以后的版本将不会自动添加px字样。当前的版本在此类情况下(比如编写style={{width: '300'}})会发出警告。类似width: 300这样的无单位数据值不会被修改。

    作者@pluma,pull request链接 #5140

  • 目前在设置及访问未作适当清除的属性时,合成事件(Synthetic Events)会发出警告,并在事件返回到池中后,在访问时发出提醒。

    作者@kentcdodds,pull request链接 #5940;作者@koba04,pull request链接 #5947

  • 在尝试从props读取refkey时,元素现在会发出提示。

    作者@prometheansacrifice,pull request链接 #5744

  • 在构造函数中,若将不同的props对象发送给super(),React会发出提示。

    作者@prometheansacrifice,pull request链接 #5346

  • 如果在getChildContext()中调用setState(),则React会发出提示。

    作者@raineroviir,pull request链接 #6121

  • React DOM现在会提示DOM元素事件句柄键入错误,比如onclick应该是onClink

    作者@ali,pull request链接 #5361

  • React DOM现在会在style中提示NaN值。

    作者@jontewks,pull request链接 #5811

  • 如果在输入内容中指定了valuedefaultValue,则React DOM现在会发出提示。

    作者@mgmcdermott,pull request链接 #5823

  • 如果输入在受约束与不受约束之间切换,则React DOM现在会发出提示。

    作者@TheBlasfem,pull request链接 #5864

  • 如果指定了onFocusInonFocusOut handler,则React DOM现在会发出提示,因为在React中这两者没有必要出现。

    作者@jontewks,pull request链接 #6296

  • 如果将无效回调作为ReactDOM render()this.setState()this.forceUpdate()的最后一个参数发送过去,则React会输出描述性的错误信息。

    作者@conorhastings,pull request链接 #5193;作者@gaearon,pull request链接 #6310

  • 插件:如果尝试在浅渲染中使用TestUtils.Simulate(),则会输出帮助性的消息。

    作者@conorhastings,pull request链接 #5358

  • PropTypes:arrayOf()objectOf()会为无效参数提供更详尽的错误信息。

    作者@chicoxyzzy,pull request链接 #5390

值得关注的bug修复

其他优化

  • React目前使用loose-envify来替代envify,所以安装的过渡依赖较之前更少。

    作者@qerub,pull request链接 #6303

  • 浅渲染器暴露getMountedInstance()

    作者@glenjamin,pull request链接 #4918

  • 浅渲染器从render()返回渲染输出结果。

    作者@simonewebdesign,pull request链接 #5411

  • 在以前的环境中,React对于Object.createObject.freeze是依赖ES5 shams的,现在仍是如此,但在相关环境中需要提供ES5 shams。

    作者@dgreensp,pull request链接 #4959

  • React DOM支持名称以数字开头的data-属性。

    作者@nLight,pull request链接 #5216

  • React DOM为类似Draft.js之类用React管理contentEditable子集的组件添加了新的suppressContentEditableWarning

    作者@mxstbr,pull request链接 #6112

  • React改进了createClass()在复杂参数中的性能表现。

    作者@spicyj,pull request链接 #5550

来自Hacker News的热评:评论者 bshimmin

删除<span>的pull request:https://github.com/facebook/react/pull/5753 实在太棒了,真是开源专业化的典范。


2016年4月22日-23日,由CSDN重磅打造的SDCC 2016数据库&架构技术峰会将在深圳举行,目前18位讲师和议题已全部确认。两场峰会大牛讲师来自百度、腾讯、阿里、京东、小米、唯品会、滴滴出行、携程等知名互联网公司,共同探讨高可用/高并发/高稳定/高流量的系统架构设计、秒杀系统架构、搜索架构、中小企业架构之道、数据平台系统演进历程和技术剖析、传统数据库与分布式数据库选型/备份/恢复原理及优化实践、大数据应用实战等领域的热点话题与技术。【目前限时6折,点击这里抢票

评论