React v15.0 正式版发布

最新推荐文章于 2024-01-31 15:01:40 发布
最新推荐文章于 2024-01-31 15:01:40 发布
阅读量967 收藏
点赞数
文章标签： React-15 稳定版 主要版本发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiansg123/article/details/80122821
版权

原文： 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()接收到的某些props是undefined的，常返回带有未定义值的元素。在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包括：findDOMNode、render、renderToString、renderToStaticMarkup以及unmountComponentAtNode。在此提醒，这些API现在在ReactDOM和ReactDOMServer中可用。

      作者@jimfb，pull request链接 #5832

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

      作者@jimfb，pull request链接 #5859；作者@zpao，pull request链接 #6016

    • 移除的组件实例方法包括：setProps、replaceProps以及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才会修改，因此你可以陆续对代码执行升级。

  • 由于使用率过低，LinkedStateMixin与valueLink将会被废弃掉。如果你需要相应功能，可以使用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读取ref和key时，元素现在会发出提示。

    作者@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

  • 如果在输入内容中指定了value和defaultValue，则React DOM现在会发出提示。

    作者@mgmcdermott，pull request链接 #5823

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

    作者@TheBlasfem，pull request链接 #5864

  • 如果指定了onFocusIn或onFocusOut 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修复

其他优化

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

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

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

钱曙光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-15.3.1
10-03
react所需要的基本文件
React DevUI 18.0 正式发布
kagol的博客
12-07 100
2021年11月，由 Jay 主导发起了 React DevUI 开源组件库项目，经过一年多的孵化🐣，终于在`2022年11月23日`发布 18.0.0 正式版本🎉
React v15版本相关原理学习
玉案轩窗的博客
07-28 566
前言 React16之后引入了Fiber的架构，这个架构的处理过程是非常复杂的，在正式去学习了解Fiber的处理过程之前，打算去深入了解下v15版本时整个的处理过程，然后再结合Fiber要解决的问题从而更加深入的理解。本文要理解的相关原理有：
React的安装步骤详解
教官的博客
12-20 477
在html页面直接应用官方CDN库 使用了 React 的版本为 16.4.0，你可以在官网 https://reactjs.org/ 下载最新版。 在浏览器中，babel编译JSX效率非常低 &lt;script src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt; &lt;script sr...
浅谈React碰到v-if
10-17
在React开发过程中，我们经常会遇到类似Vue中的条件渲染需求，比如用到类似Vue的`v-if`指令来决定组件或元素是否应该渲染。Vue的`v-if`是一个强大的指令，可以控制元素的显示与隐藏，它能根据表达式的值来决定是否...
基于React 18的新闻发布系统设计源码
最新发布
04-17
本项目是基于React 18开发的新闻发布系统设计源码，主要使用JavaScript进行开发。项目共包含52个文件，其中JavaScript源代码文件32个，JSON配置文件6个，CSS样式文件6个，PNG图片文件3个，Git忽略配置文件1个，...
react v15.6.2.js
08-24
在React v15.6.2这个版本中，我们主要关注React的核心概念——Virtual DOM（虚拟DOM）的工作原理。 一、React虚拟DOM简介 React引入了虚拟DOM的概念，它是一种轻量级的数据结构，是对真实DOM的抽象。虚拟DOM的主要...
React developer tools v3.6.0
07-23
React Developer Tools v3.6.0 是一个专为React开发者设计的强大调试工具，它极大地提升了在构建和优化React应用过程中的效率。这个版本是React生态系统的重要组成部分，它可以帮助开发者深入理解组件的状态变化、...
React developer tools v4.27.4
07-23
react开发必备调试工具
react.js完整安装包
06-05
压缩包中为 react-15.3.2 版本的相关文件以及一些示例，该文档由react官网下载，更多版本的文档请访问官网。
React 15.5.0更新
做一个NB的码农，且不止于码农
04-19 1566
转自：http://mt.sohu.com/it/d20170408/132814244_505793.shtml 4月7日，Facebook宣布正式发布React 15.5.0版本。以下是这个版本的主要功能，摘自其发布声明。 　　新的弃用警告 　　本次最大的变化是把 React.PropTypes 和 React.createClass 各自抽取成包。它们仍然可以通过React对象访问，但是
React进阶 - 15（React 中 ref 的使用）
千里之行，始于足下！
01-31 1259
React进阶 - 15（React 中 ref 的使用）
React 15架构
weixin_46063007的博客
07-20 180
在Reconciler中，mount的组件会调用mountComponent(opensnewwindow)，update的组件会调用updateComponent(opensnewwindow)。这两个方法都会递归更新子组件。ReactArt(opensnewwindow)渲染器，渲染到Canvas,SVG或VML(IE8)当层级很深时，递归更新时间超过了16ms，用户交互就会卡顿。在每次更新发生时，Renderer接到Reconciler通知，将变化的组件渲染在当前宿主环境。...
React15 核心原理模拟实现
wsq_bsdn的博客
06-15 177
搭建开发环境 要模拟 React 的核心原理我们只需要将babel转换jsx代码是调用的createElement方法转换成自定义的React即可。所以搭建开发环境时只需要能够转换jsx和es语法以及能够启动开发服务器即可。 创建文件结构 在空文件夹下创建如下的文件结构 其中TinyReact文件夹存放要实现的React核心代码 开发依赖 依赖插件 描述 webpack 打包工具 webpack-cli webpack命令行工具 webpack-dev-server 开发服务器插件
ReactJS 15.x - 例子一，HelloWorld
~~简~~
08-29 1133
例子 // 使用的是JSX的语法 ReactDOM.render( Hello, world!, document.getElementById('content2') );
React15中组件的生命周期
逸尘的专栏
10-12 889
生命周期的三个阶段（初始化阶段、运行中阶段、销毁阶段），三者时间是不固定的，只是在逻辑上的分类，react在不同的生命周期会触发不同的钩子函数。 一、初始化阶段： 　　getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,)，作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共...
React15和React16生命周期对比，初识Fiber
why404
10-08 1176
React15和React16生命周期对比，初识Fiber
react15与react16的本质区别
Superxpang的博客
01-17 1684
React 15 和 React 16 在架构和一些核心特性上存在本质性的区别。
精通React之旅：官方最新版入门指南
"The Road to Learn React - 官方最新版，一本适合初学者掌握React的指南，由Robin Wieruch撰写。书中通过简洁且实际的方式，逐步深入地讲解React的核心概念，帮助读者从基础到高级逐步掌握React技术。" React是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值