React的特点和优势

React的理念

我们可以从官网 (opens new window)看到React的理念：
 我们认为，React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。

• React是用于构建用户界面的JavaScript库， [2] 起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
• 可见，关键是实现快速响应。那么制约快速响应的因素是什么呢？

React的特点

补充一点:react vue最大的特点是跨平台,打破了苹果的生态系统，还有就是react是数据驱动视图，一切皆组件

• 我们日常使用App，浏览网页时，有两类场景会制约快速响应：当遇到大计算量的操作或者设备性能不足使页面掉帧，导致卡顿。发送网络请求后，由于需要等待数据返回才能进一步操作导致不能快速响应。
  这两类场景可以概括为：
  CPU的瓶颈
IO的瓶颈
  React是如何解决这两个瓶颈的呢？

CPU的瓶颈
当项目变得庞大、组件数量繁多时，就容易遇到CPU的瓶颈。

主流浏览器刷新频率为60Hz，即每（1000ms / 60Hz）16.6ms浏览器刷新一次。

我们知道，JS可以操作DOM，GUI渲染线程与JS线程是互斥的。所以JS脚本执行和浏览器布局、绘制不能同时执行。在每16.6ms时间内，需要完成如下工作：

JS脚本执行 ----- 样式布局 ----- 样式绘制

• 当JS执行时间过长，超出了16.6ms，这次刷新就没有时间执行样式布局和样式绘制了。
  在Demo中，由于组件数量繁多（3000个），JS脚本执行时间过长，页面掉帧，造成卡顿。
  可以从打印的执行堆栈图看到，JS执行时间为73.65ms，远远多于一帧的时间。
  
  如何解决这个问题呢？

答案是：在浏览器每一帧的时间中，预留一些时间给JS线程，React利用这部分时间更新组件（可以看到，在源码 (opens new window)中，预留的初始时间是5ms）。

当预留的时间不够用时，React将线程控制权交还给浏览器使其有时间渲染UI，React则等待下一帧时间到来继续被中断的工作。

这种将长任务分拆到每一帧中，像蚂蚁搬家一样一次执行一小段任务的操作，被称为时间切片（time slice）

IO的瓶颈

• 网络延迟是前端开发者无法解决的。如何在网络延迟客观存在的情况下，减少用户对网络延迟的感知？

• 事实上，React在解决IO瓶颈的窍门在于：点击“Siri与搜索”后，先在当前页面停留了一小段时间，这一小段时间被用来请求数据。

• 当“这一小段时间”足够短时，用户是无感知的。如果请求时间超过一个范围，再显示loading的效果。

• 试想如果我们一点击“Siri与搜索”就显示loading效果，即使数据请求时间很短，loading效果一闪而过。用户也是可以感知到的。

• 为此，React实现了Suspense (opens new window)功能及配套的hook——useDeferredValue (opens new window)。而在源码内部，为了支持这些特性，同样需要将同步的更新变为可中断的异步更新。

React还做了什么?

虚拟DOM

• 我们以前操作dom的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作。而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有本质的区别，并不和dom打交道。在React16中重构了React的架构，可以自行了解。

组件系统（提高复用，模块化编程）

• react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component
  那么什么是组件呢？
  组件指的就是同时包含了html、css、js、image元素的聚合体
  使用react开发的核心就是将页面拆分成若干个组件，并且react一个组件中同时耦合了css、js、image，这种模式整个颠覆了过去的传统的方式。

单向数据流(这也是与Vue最大的区别)
其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了

JSX 语法
在vue中，我们使用render函数来构建组件的dom结构性能较高，因为省去了查找和编译模板的过程，但是在render中利用createElement创建结构的时候代码可读性较低，较为复杂，此时可以利用jsx语法来在render中创建dom，解决这个问题，但是前提是需要使用工具来编译jsx。

可以用于服务端渲染

参考文献

《React的技术揭秘》