深入理解 React (一) ——JSX和虚拟DOM

版权声明：本文由左明原创文章，转载请注明出处: 
文章原文连接：https://www.qcloud.com/community/article/155

来源：腾云阁 https://www.qcloud.com/community

 

首先，咱们来看看 React 在世界范围的热度趋势，下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比，蓝色的是 React，红色的是房价，很明显，人类对 React 的关注程度已经远远超过了对房价的关注。

从这些数据中，你们能看出什么？

能够很明显的看出，我在一本正经的扯淡。

从2014年到如今，React、jQuery和 Angular 的热度趋势对比，能够很明显的看到（上图），React 在全球的热度趋势增加很是快。

上图是 React 在国内的百度搜索指数，是拿 React 和 Nodejs 作了个对比，能够看出 React 的关注度也已经逼近 nodejs。

虽然在关注总量上 React 还远不及 jQuery 和 Angular 等等，但它的增加幅度超乎你想象，你知道这意味着什么吗？这意味着关注 React，你就比大多数人走在了业界的前沿！

那么React究竟是什么鬼？

引用官网的简介，“一个用来构建用户界面的javascript库”。

React 起源于 Facebook 的内部项目，由于 FB 对市场上全部 JavaScript MVC 框架，都不满意，就决定本身写一套，用来架设 Instagram 的网站。作出来之后，发现这套东西很好用，就在2013年5月开源了。

因为 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却很是简单。因此，愈来愈多的人开始关注和使用，认为它多是未来 Web 开发的主流工具。

和 Backbone、Angular 等 MV* 框架不同，它只处理 View 逻辑 ，它只处理 View 逻辑，它只处理 View 逻辑。因此若是你喜欢它，你能够很容易的将它接入到现有工程中，而后用 React 重写 HTML 部分便可，不用修改逻辑。

咱们看看大牛们怎么说——

大牛们对新技术的跟进速度老是很是快的，不过话说React出来也已经2年了，其实并不算什么新技术了。

React 这么火，那么它到底有什么牛逼的地方？

上图是2015年年初的数据

这是 Facebook 的好友动态页面，也是 Facebook 访问量最大的页面没有之一，经过 Chrome React 插件能够看到这个页面确实是用 React 实现的。

这些是使用了 React 的一小部分站点，太多了放不下。

前面给你们来了一波前戏，相信你们已经有点火烧眉毛了，那么，进入正题：

首先，先跟你们描述下 React 最特别的部分，听完这部分你们基本就可以在脑海里创建起一个 React 的大体印象。
而后是 React 的核心内容，听完这部分你们待会回去就能够开始写代码而后今天晚上发布上线了。
最后是 React 可以给咱们实际带来的价值，咱们不做无心义的重构。
首先，咱们来看JSX——

咱们先说说模板。
HTML 模板有不少种编写方式，这是一种。

还有这种。

还有多年前流行的 script 标签模板。

这种运行时编译的模板调试起来比较困难，尤为是出现错误时，很难定位，若是要定位，须要作不少额外的工做，麻烦。

近两年构建工具的流行，不少团队已经在使用grunt等构建工具来预编译模板，从而简化模板开发，提升运行效率，减小维护成本。

JSX 使用的也是预编译模板，和前面看到的没什么差异，细心的同窗会发现好像只是没有字符串引号了而已。
React 提供了一个预编译工具，叫 react-tools，能够经过 npm 命令安装，通常是在开发时期运行，运行后它会启动一个监听程序，实时监听 JSX 源码的修改，而后自动编译为 JS 代码。
你们留意下，里面的 UL LI 被编译成了 React.createElement()，它这么作，目的就是为了实现 虚拟 DOM。
JSX 还支持运行时编译，可是为了推荐你们用预编译，因此我不打算告诉大家运行时编译怎么作。
OK，祝贺你们已经精通了 JSX。

(BTW：导出图片之后没有价值1块5的特效了，凑合着看吧)

接下来咱们来了解 React 最大的亮点 —— 虚拟 DOM。

传统 web app 和 DOM 直接交互，由App来控制DOM的构建和渲染、元素属性的读写、事件的注册和销毁等等。
当新产品刚上线的时候，这种作法看起来也挺好。但随着产品功能愈来愈丰富、代码量愈来愈多、开发团队人员愈来愈多——

一年后

你的代码可能会变成这样。

固然，合理的代码规划可以避免这类问题，但团队里不免会有擅长屠宰式编程的同窗，分分钟把你代码改为这样。

这时，React的虚拟DOM和单项数据流就能很好的解决这个问题。

虚拟DOM则是在DOM的基础上创建了一个抽象层，咱们对数据和状态所作的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。

虚拟DOM会使得App只关心数据和组件的执行结果，中间产生的DOM操做不须要App干预，并且经过虚拟DOM来生成DOM，会有一项很是可观收益——性能。

全部人都知道DOM慢，渲染一个空的DIV，浏览器须要为这个DIV生成几百个属性，而虚拟DOM只有6个。demo

因此说减小没必要要的重排重绘以及DOM读写可以对页面渲染性能有大幅提高。
那么咱们来看看虚拟DOM是怎么作的。React会在内存中维护一个虚拟DOM树，当咱们对这个树进行读或写的时候，其实是对虚拟DOM进行的。当数据变化时，而后React会自动更新虚拟DOM，而后拿新的虚拟DOM和旧的虚拟DOM进行对比，找到有变动的部分，得出一个Patch，而后将这个Patch放到一个队列里，最终批量更新这些Patch到DOM中。
这样的机制能够保证即使是根节点数据的变化，最终表如今DOM上的修改也只是受这个数据影响的部分，这样能够保证很是高效的渲染。
但也是有必定的缺陷的——首次渲染大量DOM时由于多了一层虚拟DOM的计算，会比innerHTML插入方式慢。

几个UI组件的渲染性能对比demo

一个最基本的 React 组件由数据和JSX两个主要部分构成，咱们先来看看数据。

这是一个简单单完整的React组件【类】，细节你们先不用太在乎细节，了解机制就能够。

props 主要做用是提供数据来源，能够简单的理解为 props 就是构造函数的参数。
state 惟一的做用是控制组件的表现，用来存放会随着交互变化状态，好比开关状态等。

JSX 作的事情就是根据 state 和 props 中的值，结合一些视图层面的逻辑，输出对应的 DOM 结构。

前面咱们知道了一个简单的组件的构成，但单个的组件确定不能知足实际需求，咱们须要作的是将这些独立的组件进行组装，同时找出共性的部分进行复用。

咱们拿你们熟悉 KM 首页来进行示例，大的模块有中心主体区域，左侧有 K 吧列表、应用列表等，能够看出，里面的<Pub/> <Article/> <App/> 都是最细粒度的组件，是能够复用的。

首先，咱们来看下Article的代码——

这个就是咱们分解出来的 Article 组件，它须要2个属性，article对象和showImage。article对象包含图片、地址、标题、描述信息，showImage是一个布尔类型，用来判断是否须要显示成一个图片。

这个组件自己的实现能够很简单也能够很复杂，但使用者可不关心你的内部实现，使用者关心的是组件须要什么参数就能够了。

外国人的组件化思想比咱们国内的普及程度高不少，不仅局限于软件开发，包括实体行业的咖啡机、加油站、 儿童摇摇车都有这种设计思想在里面。

但愿你们在设计模块的时候，也尽量将组件逻辑对外透明，来减小维护成本。

咱们继续看 KM 的热点区域，你们留意一下标虚线的部分，这里复用了 Article 组件。这时的 Article 组件看起来就是一个普通的标签而已，简单吧。

这个是热问组件，也复用了 Article 组件。
这就是 React 如丝般顺滑的组件复合。

文章来源公众号 小时光茶社（Tech Teahouse）