react15来了

潇湘待雨 潇湘待雨     2022-08-14     152

关键词:

  有段时间没做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一起安装:

1 //yarn
2 yarn add react react-dom
3 //npm 
4 npm install --save react react-dom

  14版本的时候react-dom其实已经单独使用了,不过是打包在react中的。通常这样引入:

1 import ReactDom from ‘react/lib/ReactDOM‘;
2 
3 //now 就可以这样引入
4 
5 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

react18就要来了,来看看发布计划(代码片段)

React在今天刚刚在官网发布了有关于React18的计划更新(ThePlanforReact18–ReactBlog),同时发布了Alpha版本的npm包:下载地址:https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html最近虽然忙到没时间做视频, 查看详情

react18就要来了,来看看发布计划(代码片段)

React在今天刚刚在官网发布了有关于React18的计划更新(ThePlanforReact18–ReactBlog),同时发布了Alpha版本的npm包:下载地址:https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html最近虽然忙到没时间做视频, 查看详情

react15

react15最近项目由react0.14.X升级到react15版本,因为react15还是做了一些相对大一点的更新的(详情可以参考一下我的另一篇文章关于react15的一点总结),相对;来说react升级之后但react问题并不太多。但是react相应的配置,例如babel... 查看详情

游匣g15怎么样游戏评测来了

...量关注,始终位居热销榜单第一。这不马上双十一要来了,不少人都准备好了银子,想在这个购物节里换一台好点的游戏本,实现自己在游戏中的梦想,而这款产品更是许多人的首选。那么,游匣G15怎么样... 查看详情

React 15 与 React-redux 不兼容

】React15与React-redux不兼容【英文标题】:React15notcompatiblewithReact-redux【发布时间】:2016-06-2318:38:51【问题描述】:我正在尝试在我的项目中升级到新发布的react@15.0.0-rc.1,该项目也使用react-redux@^4.4.0包。但是,当我尝试运行文档... 查看详情

ios15最具人文关怀的功能:“数字遗产”来了

今年6月,苹果在WWDC上展示了iOS15的多项新功能,原本以为9月份正式版发布后就能体验到全部功能,结果苹果少见地悄悄放起了鸽子。同播共享功能iOS15.1才上线,而被看做新系统最具人文范的功能——数字遗产功... 查看详情

关于 React Native App 中的 this.state 函数

...】:您好,这是我的代码。当我尝试填充文本框时,错误来了,即(\'this.setState不是一个函数。(在this.setState(emal:email)this.setStateisunderfined\')。这是我的代 查看详情

当使用 react-redux v5 设置 React v15.5 时,路由不导航

】当使用react-reduxv5设置Reactv15.5时,路由不导航【英文标题】:RoutesarenotnavigatingwhenReactv15.5setupwithreact-reduxv5is【发布时间】:2017-12-1722:15:48【问题描述】:我是React新手,我已经使用Facebook的create-react-app设置了我的React项目。以下... 查看详情

10月15日|云栖大会“淘宝移动技术实践&开放论坛”来了!

参会报名链接:http://click.aliyun.com/m/6251/650)this.width=650;"src="http://s4.51cto.com/wyfs02/M02/87/C3/wKiom1fg3eKjUWLdAAsf8JExNTo815.jpg-wh_500x0-wm_3-wmp_4-s_19308634.jpg"title="h5修改6.jpg"alt="wKiom1fg 查看详情

对象作为 React 子代无效(在 Internet Explorer 11 中用于 React 15.4.1)

】对象作为React子代无效(在InternetExplorer11中用于React15.4.1)【英文标题】:Objectsarenotvalidasareactchild(InInternetexplorer11forReact15.4.1)【发布时间】:2017-04-1508:13:54【问题描述】:对象作为React子对象无效(找到:带有键$$typeof,type,key,re... 查看详情

taro+react开发(15)--对应文件编译

查看详情

react学习(15)---antdesignform两种验证

查看详情

设置 Jest 和 Enzyme 来测试 React 15 找不到模块 react/lib/ReactTestUtils

】设置Jest和Enzyme来测试React15找不到模块react/lib/ReactTestUtils【英文标题】:SettingupJestandEnzymetotestReact15cannotfindmodulereact/lib/ReactTestUtils【发布时间】:2017-03-2020:28:11【问题描述】:我有一个react项目,正在尝试设置一些测试由于以... 查看详情

React-native@0.26.3 需要 react@15.0.2 的对等点,但没有安装

】React-native@0.26.3需要react@15.0.2的对等点,但没有安装【英文标题】:React-native@0.26.3requiresapeerofreact@15.0.2butnonewasinstalled【发布时间】:2016-12-0718:04:48【问题描述】:我正在尝试为reactnative进行设置。但是每当我更新文件时,它都... 查看详情

如何从 React ^0.14.8 & React-native ^0.24.1 升级到 React 15.0.2 和 React-native 0.26.3

】如何从React^0.14.8&React-native^0.24.1升级到React15.0.2和React-native0.26.3【英文标题】:HowtoupgradefromReact^0.14.8&React-native^0.24.1toReact15.0.2andReact-native0.26.3【发布时间】:2016-10-0315:15:57【问题描述】:我有Xcode版本7.3.1节点版本v4.4 查看详情

React 15.1.0,将整个状态从父级传递给子级

】React15.1.0,将整个状态从父级传递给子级【英文标题】:React15.1.0,Passentirestatefromparenttochild【发布时间】:2016-09-2618:57:29【问题描述】:我正在使用React15.1.0。假设有父“P”组件,它包含一个子组件“C”。在旧版本的react中,... 查看详情

我还在生产玩jdk7,jdk15却要来了!|新特性尝鲜(代码片段)

自从JDK9之后,每年3月与9月JDK都会发布一个新的版本,而2020年9月即将引来JDK15。恰巧IDEA每四五个月会升级一个较大的版本,每次升级之后都会支持最新版本JDK引入的新功能。这几天升级了IDEA,顺便体验了一下JDK15的新特性。虽... 查看详情

[react]reactv15中怎么处理错误边界?

[react]Reactv15中怎么处理错误边界?React15中有一个支持有限的错误边界方法unstable_handleError。此方法不再起作用,同时自React16beta发布起你需要在代码中将其修改为componentDidCatch。  个人简介我是歌谣,欢迎和大家一起... 查看详情