Web发展史 - React的前世今生

历史

首先思考一个问题，10年甚至20年前我们的网站是怎么开发的？

虽然我也没接触过90年代到2000年的代码，但在那个年代，我们的网站同样也是使用javascript、html、css写的，不同的是当年的javascript无法与界面互动，也就是每一条url对应着绝对路径下的3个文件分别是javascript、html、css。

后来出现了AJAX，也就是阿贾克斯技术，可以允许程序员通过javascript来操作html元素，也就是可以动态控制dom元素，这时候前端技术出现了井喷式的发展，其中最著名的就是2006年推出的jQuery。他在封装原生javascript的时候，不仅给我们程序员提供了各种丰富的api来控制dom元素，同时还让我们脱离的底层代码对各种奇葩浏览器支持的苦恼。

于是，从此以后，网站开始变得越来越复杂，需求越来越多样化。这时，人们突然发现，jquery写出的代码是在太复杂了，代码维护的成本也越来越高了。人们开始说，我们不仅要简化代码，还要设计模式。

于是，2010年，第一代AngularJS带着mvc的设计理念横空出世了。随着angularjs和mvc架构的引入，网站开发的又一次进入了爆炸式的发展。但是，第一代angularjs的设计却带着天生的缺陷，就是双向数据绑定。因为双向数据绑定，导致网站运行速度越来越缓慢；同时，mvc架构也带来了页面状态管理混乱的问题。

虽然第一代angularjs因为以上这几个问题被历史抛弃了，但是他带来的网站设计思想却让所有人叹为观止，这就是组件化。组件化就相当于把每个网页拆成若干个独立的模块，这也就意味着你的网站可以被轻易复制和管理，于是，顺应着组件化的思想，就诞生了我们今天所熟知的angular、reactjs、vuejs等等一系列前端框架，同时也产生了flex、redux、mobx、immutable、observerable等一系列状态管理思想。

历史解读

所以，对于为什么会出现react框架这个问题，需要我们站在历史的角度上来思考，任何一个框架、任何一个技术都不是拍拍脑袋就想出来的，而是为了切实的解决某个存在的问题而产生的。所以，从唯物主义历史的角度来说，类似react这样的组件化框架的产生是历史的必然选择。

前端发展短短20年，技术却突飞猛进，连设计思想都迭代了好几次。也就是说，前端技术更新换代的频率非常高，我们要居安思危，随时把握时代发展的风向，一定要善于学习，而且学习前沿技术，追赶时代潮流是我们前端工程师必须面对的一道门槛。否则今天就算你是jquery专家、原生javascript专家，但是你觉得你能找到满意的工作吗？

react编程思想

react的成功基于3个独特的设计理念：https://zhuanlan.zhihu.com/p/28562066

单向数据流

虚拟 DOM

组件化

单向数据流

在 React 问世之前，人们就已经认识到数据与界面绑定在一起的重要性，通过数据的变化来动态改变页面的显示，这种方式可以极大的减轻前端开发的压力。为了解决 UI 和数据同步复杂性的问题，第一代angularjs引入了双向数据绑定的概念，数据的变化会改变ui，但是操作ui也同样可以影响数据。双向绑定在简化了代码的同时，也带来了灾难性的影响，页面的Controller控制器围绕着一个叫做scope的对象来组织和更新数据、创建方法、分发事件，于是整个angularjs的项目就变得越来越臃肿，数据也越来越不可控。最后，连angularjs自己都放弃了自己，另起炉灶改为使用单向数据流。

有了前车之鉴，reactjs的对于数据的处理就聪明很多了，在选择单项数据流的时候，也选择了另外一条完全不同的方向：单向渲染。这种方式简单易懂：React 就像是一个没有副作用的函数，忠实地根据输入的数据来构建符合预期的 UI。同时，React 也更像 JS 本身，而不是一种面向某个领域的方言。前端工程师只需要学习其少量的 API，可以借助之前积累的 JS 经验来优化开发效率。

虚拟 DOM

如果说单向渲染是 React 的内核思想，那么虚拟 DOM 就是能够让这个思想得以实现的关键性技术。这里不得不佩服 React 先驱们的聪明才智，他们大概从 Docker 或者虚拟机vmware 的Snapshot快照技术中得到了一些灵感，在 JS 和 DOM 之间增加一个新的抽象ui层，在真实ui需要更新时，react会对比这两个ui层的差异，最终以最小的代价差量更新ui的元素