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

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

React在定位上于传统的MVC框架是不同的&＃xff1a;

MVC模式

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

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

MVVM模式

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

React高性能的体现&＃xff1a;虚拟DOM

React高性能的原理&＃xff1a;

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

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

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

Diff算法的原理&＃xff1a;

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

React Fiber结构&＃xff1a;

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

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