本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出
来我的
GitHub repo 浏览完整的专题文章来我的
个人博客 取得无与伦比的浏览体验
什么是UI？
假如你指的是规划和颜色，那更倾向于设计师的事变。
在当代web范畴，人人已有一个共鸣：UI是状况的演进。
那末什么是状况(state)？
当代网页每每意味着大批的人机交互，每一次交互都邑发作一些数据，这些数据或许放在内存中，网页封闭即烧毁，或许发送给服务器永远保留。但不管怎样，这些数据都是前端要处置惩罚的。
带有时间性的交互数据，就是状况。
当页面初始化完成，变化的只需状况，所以我们才说UI是状况的演进。
当代前端框架的使命就是：开发者治理状况，框架根据状况自动天生UI。
起首我们明白一点，状况和UI是一一对应的。
只需状况发作转变，就须要一套新的UI和它婚配。
这就引出了当代前端框架的中心：怎样去监控运用的状况？
Angular
Angular的哲学是监控状况发作转变的一切出口。
这类体式格局简朴粗犷。
假如发明商场里有在逃通缉犯，那就变更警力封闭一切的出口，逃犯总不能够在商场里过日子。
而且Angular还欣喜的发明实在出口统共没几个。event回调，http回调，timer回调，promise回调，也许就这些了。
那末怎样监控这些出口呢？
狸猫换太子，对这些使命做一层封装，开发者挪用的实际上是被Angular动过手脚的要领。方才说什么来着？相称暴力。人人应当都听说过赫赫有名的zone.js吧，它就是Angular所谓脏搜检的基础设施。
不过Angular已日薄西山了。峻峭的学习曲线，痴肥的代码库，一代和二代的完整不兼容，必定它要被开发者扬弃。
Vue
Vue的哲学是监控变量。
变量实际上是状况的容器，不管状况怎样变，末了都要装到变量这个坛子里。
Vue也以为变更警力实行封闭实在是太粗犷了，当代社会的命根子是什么？是金融啊喂！
我只需监控逃犯的金融账户，就不怕他不消耗。控制他的行迹，实行定点抓捕就能够了。
那末怎样监控变量呢？
JavaScript底层有完成，经由过程Object.defineProperty接口的getter和setter，能够随意马虎监控变量的读取和更新。固然ES6开放了越发壮大的Reflect和Proxy接口。
具体操纵呢，在初始化阶段，Vue会把挂在UI上的变量都读一遍，触发getter，然后getter会为每一个变量保护一个数组(由于一个变量能够被屡次运用于UI)，变量以及对应的回调被绑在一起push进数组里。每次开发者更新变量的值就会触发setter，setter的作用就是实行回调。固然，回调里就是更新UI的行动。
某种程度上说，Vue脱胎于Angular，它带着Angular的遗志，将来是要和React决斗光明顶的。
Vue没有让人扫兴，如今已是一枚当红流量小生了。
React
React的哲学是监控DOM的镜像。
人海茫茫抓捕逃犯本钱不是高嘛，我们有监控摄像头啊！无数的摄像头基础能够拼凑出一个公开场合的副本，依托这个副本，警方能够为所欲为的对照、回放、剖析，而不须要挂念布置警力的本钱。
React的思绪非常奇异，既然框架担任自动更新UI，那UI就应当成为框架的一部分。
如今UI成了框架的画板，开发者在画板上自在作画，阶段性完工后再由React一次性挂到界面上。
这就带来了一个题目：DOM是好惹的吗？这么不尊敬它，每次innerHTML了事？
React必需处理这个题目，而它的计划是笼统UI(平常称为Virtual DOM)。
当我们说div是一个元素的时刻，我们指的不是谁人标签，而是与之关联的一个对象，这个对象形貌了div的位置和功用，根据这个对象我们是能够回复出一个DOM节点出来的。
可React以为这个对象照样太痴肥了，对象里只须要包括必要信息即可，因而React提取必要信息构建了一份DOM的镜像。
什么是必要信息呢？对一个节点而言，它的标签范例、属性、子节点援用就是必要信息，无数节点建立其位置就形成了一个树结构，这个树结构和DOM是一一对应的。
当状况更新的时刻，React便取得了两份镜像，经由过程对照这两份镜像，React就能够给UI打补丁，而不是完整掩盖旧的UI了。
React做的事变迥殊地道，你手里有一幅画，你能够在画上作恣意变动，React的使命就是在适宜的机遇将你的变动天生一幅新的画。
为何是React
假如说Angular手里握有充足的警力，Vue手里握有金融命根子，那末React手里握有的是全部舆图，这他妈不是开挂了么！
固然，框架之间不能如许简朴的去对照，然则对开发者而言，在React架构下，状况的层次感变得非常清楚。
我们已赞同状况是当代网页的中心，也赞同UI是状况的演进，那末清楚的状况层次感和开发者对UI充足的掌控力(幻觉)，会给开发者一种莫名的次序感，这类次序感才是React备受开发者喜欢的根本缘由吧(不接受贰言)。
你看，我在画板上作画哟，真的是我在作画哟。
除此之外，React真正的以组件为中心，HTML和CSS都归入到组件中来，也是它备受开发者喜欢的缘由之一。
除此之外，React把UI笼统出来，理论上能够运用到任何界面，也是它备受开发者喜欢的缘由之一。
除此之外，JSX的不三不四，额…是开发者须要战胜的心理障碍。
React专题一览
