react 15来了

Posted 2020-08-20 潇湘待雨

　　有段时间没做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。