初入React——Recat的起源和特点

React的起源来源于Facebook，当时Facebook想要做一款关于照片墙的App，当时筛选了市场上的大部分JavaScript MVC框架，都不满意，就决定自己写一套，用来架设自己的Instagram的网站。做出来以后，发现这套东西非常的好用，于是就决定对其进行开源，最终在2013年5月对外开源。

React在定位上于传统的MVC框架是不同的：

MVC模式

MVC所实现的目标是使代码可扩展性，可复用性、可维护性、灵活性加强。

Model层是业务逻辑，View层是界面，Controller（控制器）层是用来调度View和Model层，将用户界面和业务逻辑合理的组织在一起，相当于人的中枢神经。所以Controller中的内容尽量少之又少，这样才能保证最大的灵活性。

MVVM模式

react、vue这两个框架的核心理念都是数据驱动页面渲染，同时他们都是MVVM模式的框架，MVVM模式的M还是固定表示Model，V还是表示View，这两个基本都是不会发生变化，一个页面必须需要数据和渲染两个部分，那么变化的是如何将Model渲染到View的过程变了，在MVVM模式中，将View和Model绑定在一起，只要Model发生了变化，View就会自动更新，不需要我们认为的再去写如何操作DOM更新的过程了。

React高性能的体现：虚拟DOM

React高性能的原理：

我们通常以进行高性能的DOM操作来衡量一个前端开发人员技能的重要指标。（在Web中我们需要将变化的数据实时反应到UI上，这时我们需要对DOM进行操作。复杂而频繁东西DOM操作通常是性能瓶颈产生的原因所在）

虚拟DOM自然就是跟DOM有很大关系的了。我们在使用原生JS开发或者使用Jquery开发，经常就会操作DOM，但是我们使用的时候发现，每次我们改变DOM的时候，页面再次渲染，会花费不短的一段时间，这样用户体验就不太好了。如果我们每次操作的不是DOM或者每次只操作更少的DOM呢，是不是会花费的时间更短呢，基于这个想法，就有了虚拟DOM。

在React中，会把DOM转换成JavaScript对象，然后再把JavaScript对象转换成DOM，这样我们对于DOM的操作，实际上是再操作这个JavaScript对象。尽管每一次都需要构造完整的虚拟DOM数，但是因为虚拟DOM是内存数据，性能是极高的，对实际DOM进行操作的仅仅是Diff，因而能达到提高性能的目的。这样，再保证性能的同时，开发者不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心再任意一个数据状态下，整个界面是如何Render的。

Diff算法的原理：

在某一个时间节点调用React的render()方法，会创建一颗由React元素组成的树。在下一次state或props更新时，相同的render()方法会返回一颗不同的树。React需要基于在这两棵树之间的差别来判断如何高效的更新UI，以保证当前UI与最新的树保持同步。

React Fiber结构：

React Fiber是对React核心算法的重新实现，也是React团队花了两年时间研究的结晶。React Fiber的目的提升其对于动画、布局、手势等场景的适用性。它的核心功能就是增量渲染：一种将渲染工作分解为多个区块并将分散到每一帧里面。

其他核心功能还包括随着程序中新的update引起的暂定、终止和继续等；以及为不同任务分配优先级；和最新的并发性。