react 15来了
有段时间没做react的项目了,前两天才发现react搞了一个不太小的动作,不是遵循原来的小版本号迭代,从0.14.x继续更新,而是直接跳到了15.0.X。虽然业界一直有这个观点,0.x的版本视为非稳定版本即测试版本,但是react一直以来就是特立独行的始终不上1开头的版本而是继续在0.n的道路上一发而不可收拾。开始的少年都是倔强的,后来就屈服了。。。始终有群众告诉他,你这个版本我以为不是稳定版本让我不想选用。当然react刚开始的时候确实不稳定,当初0.2.X出来的时候你官网上的api名字都更新了一堆,让人感觉我这是在弄啥嘞。不过现在了react形势一片大好的时候,你还告诉我认为不稳定我想开发小组成员内心是崩溃的。还真有不少人跟我纠结这个版本号呀,不过现在再用1.X总感觉哪里不对。于是乎,他们就跳了一大步,react15.X来了。宣称(一下是官方说法):有助于表明我们对稳定性的承诺,并为我们提供了灵活性,以便我们能够在小版本中添加向后兼容的特性”。
闲话说的有点多了,赶紧切回正题。我们当然关注的是该次更新react的变化。该次的更新除了例行的bug修复和额功能更行外,实现方式也进行了部分变动。包括拆分react和reactdom,更好的支持svg,渲染更快witheout data-reactid等。具体来看变化主要有以下几点:
一、react 被拆分为 react和react-dom :也就是说我们以后安装的时候要安装两个package才能使用react。不过可以通过npm或者yarn一起安装:
//yarn
yarn add react react-dom
//npm
npm install --save react react-dom
14版本的时候react-dom其实已经单独使用了,不过是打包在react中的。通常这样引入:
import ReactDom from 'react/lib/ReactDOM'; //now 就可以这样引入 import ReactDom from 'react-dom';
其中基本的api和原来差别不大: react package 中包含 React.createElement、 .createClass、 .Component, .PropTypes, .Children 。react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode。
二、react框架更新:
1): dom的实际操作使用document.createElement代替了innerHTML ,使得dom元素一眼看去不再是满满的data-reactid属性。这样使得dom渲染在原本的基础上又进行了一些提升(具体也没做验证,毕竟是官方文档的说辞)。过去使用innerHTML进行插入式因为当时react生成了一长串的string,所以当时场景下innerHTML确实比document.createElement更快捷。现在基于浏览器的发力,使得这方面的差异没有那么多并且剩余部分的优势就体现出来了。(具体也没深入进行研究呀。。大致知道就好了诸位)。一句原话概括:document.createElement is in and data-reactid is out 。
2): 如果使用过react,应该知道react热衷于给你的文字部分加上<span>标签。。。看起来没什么影响,但是你给你正式添加的<span>元素设置一些特别的css属性时这下就有一些更特异想现象出来了。。终于修复掉这个问题了。这里感谢一下这个Michael的外国大牛,是他的提交干掉了这个问题。惯例一句原话:No more extra <span>s
3):对svg的支持有了很大提高。所有的svg标签已经完全支持了(如果发现有不支持的,努力的去提issues),所有的属性业已实现支持too。Improved SVG support
4):null的变化,原来某些方法里render的null现在已经被comment nodes (注释节点)取代了。当使用nth-child的时候要注意了,会有影响。Rendering null now uses comment nodes
5):更有用的一些warning这个没什么好解释的。
我所能了解到的也就是这些了,个人比较欣喜的就是默认填充<span>这个功能的解决,原来确实被困扰过。后续会把原来的react项目兼容最新react过程中踩到的一些坑来分享一下。总体而言,react还是很不错的。欢迎入坑。
抛砖引玉,共同学习,希望得到大牛们的指点和斧正。前端技术就是这样,时时刻刻在更新在变化,唯有始终前行,方能拥抱变化。参考文章https://facebook.github.io/react/blog/2016/04/07/react-v15.html。
react 15来了的更多相关文章
- 升级react 15.4,常见的错误及解决方案
最近项目由react0.14.X升级到react 15版本,因为react15还是做了一些相对大一点的更新的(详情可以参考一下我的另一篇文章关于react15的一点总结),相对:来说react升级之后 ...
- react 15.5版本的警告问题
一.问题描述 前几天从git上拉下一个项目,cnpm i 安装依赖,项目跑起来后,发现有两个警告.之前这个项目都好好的,怎么突然报错了? Warning: Accessing PropTypes vi ...
- react-native init的时候出现问题:npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was
react-native init的时候出现问题:npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was ...
- npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was installed.
解决方案: 方法一: npm install -save react@~15.3.1 方法二:在package.json中可以添加依赖 "dependencies": { &quo ...
- react 15
react 15 最近项目由react0.14.X升级到react 15版本,因为react15还是做了一些相对大一点的更新的(详情可以参考一下我的另一篇文章关于react15的一点总结),相对:来说 ...
- npm WARN react-native-maps@0.14.0 requires a peer of react@>=15.4.0 but none was installed
install the react-native here comes a questions :: npm WARN react-native@0.41.2 requires a pe ...
- [React] 15 - Redux: practice IM
本篇属于私人笔记. client 引导部分 一.assets: 音频,图片,字体 ├── assets │ ├── audios │ ├── fonts │ └── images 二.main&quo ...
- React常见的15个问题
在 jsComplete,我们管理一个专门用于帮助编程学习者 slack 帐户.我们常常会收到一些有趣的问题,但大多数问题都是常见问题. 我创建这个资源为了帮助 React.js学习者遇到这些常见的问 ...
- 将react升级到15之后的坑
问题来源: 运用ant-design 的metion组件必须要使用react 15.x以上的版本,而目前所用的版本是 react 0.14.x版本,所以就不得不对react进行升级 出现的问题: ...
随机推荐
- RegExp对象
RegExp()构造函数带有两个字符串参数,其中第二个是可选的,如果提供第二个参数,它就指定正则表达式的修饰符.第一个函数包含正则表达式的主题部分,也就是正则表达式直接量中两条斜线之间的文本.无论是字 ...
- 方法的覆盖(override)、重载(overload)和重写(overwrite)
body { background-color: white } .markdown-body { min-width: 200px; max-width: 760px; margin: 0 auto ...
- Iterator(迭代器)-对象行为型模式
1.意图 提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示. 2.别名 Cursor-游标. 3.动机 一个聚合对象,应该提供一种方法来让别人可以访问它的元素,而又不需暴露它的 ...
- dojo布局(layout)
使用BorderContainer和ContentPane实现布局 1.效果图如下: 2.HTML代码: <div id="appLayout" class="de ...
- tunning-Instruments and Flame Graphs
On mac os, programs may need Instruments to tuning, and when you face too many probe messages, you'l ...
- alphaRGB 转 RGB、16位
struct xColor { BYTE b, g, r, a; }; struct RGBColor { BYTE b, g, r; }; //void operator <<(RGBC ...
- SAP 采购订单行项目中科目分配被隐藏,发现行项目设置中显示字段长度为0
1.sm30 维护 视图 TCVIEW 修改对应字段的显示长度
- JavaWeb 学习009-4个页面,5条sql语句(添加、查看、修改、删除)
===========++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++==+++++++++ 2016-12-3------ ...
- jQuery Mobile 表单输入元素
jQuery Mobile 文本输入 输入字段是通过标准的 HTML 元素编写的,jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式.您还可以使用新的 HTML5 <inp ...
- Global.asax 文件是什么
Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法.你可以使用这个文件实现应用程序安全性以及其它一些任务.下面让我们详细看 ...