React技术初识

前端框架哪家强，如果没理解错，应该是React,Angular,VUE。记得去年的时候，和我一个老同学聊天，他是一个架构师，偏向于后端开发，但是发现他已经在入手React技术了，而且做得风风火火，我对React有所耳闻，基本是一句话简介的了解。因为我的重心还不打算在前端做很多投入，所以就只是问问而已，就此作罢。

然后不久听到Facebook因为React开源协议问题，和开源社区吵的沸沸扬扬。国内方面百度等也宣布停止使用React，要求各部门选择新的方案。这件事导致很多公司在评估使用 React 风险和替换成本的时候，发现这件事风险很高。所以技术上的基因是没有问题，但是大海航向靠舵手，开源的方案协议还是很多，选择还是需要做一些参考和对比。

以下是前端专家阮一峰做的一个开源协议的翻译，原文是Paul Bagwell整理的一个列表。

我们来说下React,React 起源于 Facebook 的内部项目，因为对市场上所有 JavaScript MVC 框架都不满意，就决定自己写一套，做出来以后，发现这套东西很好用，就在2013年5月开源了,所以说React技术只是在2013年开放，技术的基因其实要更早一些。

简单来说，既然React是重新构建的一套框架，对市面上的框架不满意，所以换一种理解就会容易很多，React不是一个完整的MVC/MVVM框架，只专注于提供直接的view视图层解决方案，在设计之初就做了裁剪，只专注于组件开发技术，在React中没有控制器，服务，没有指令，也没有过滤器。

React的目标是Minimal API Interface,值提供组件化相关的少量API,实现是很轻量级的。它是为了组件开发而诞生，能够最大限度的简化一个组件的开发。

React可以搭配Flux架构，使用Redux实现。他的一个核心是数据单向流动，也是学习React的一个难点。这个我后续准备也入手学习下。

我不希望大家的第一课就是跑个demo，然后发现对React的原理没有任何理解。所以要提一下，React使用了virtual DOM的技术，这个需要我们好好理解一下，也是学习React的核心。

一般来说，我们知道的大多数前端技术，都是程序直接来改变DOM，DOM通过事件触发来告知程序。

而在React中使用了Virtual DOM，类似于一个缓冲器，使得数据的流程都需要经过Virtual DOM这么一个角色。

这么做有什么意义呢，我们来设想一个场景。

比如有一个列表，我们使用标签<li>来描述。

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

我们需要把DOM结构修改为：

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

按照一般的方式，我们需要两类操作，先删除已有的5个元素5~9,然后插入新的元素1~4

这样下来，细粒度的原子操作就是5+4=9次。Virtual DOM的核心算法就是DIFF,通过它来完成最小的操作,来避免频繁的DOM操作。使用Virtual DOM的消耗就是修改4个已有的InnerHTML元素5~8,，然后新增一个元素9

比如下面一个看起来使用相对复杂的操作，如果是这样一个的数据结构，如果使用Virtual DOM这个复杂度就会降低，直接在叶子节点层直接转换（是一个类似append的操作）即可。这也是React的核心DIFF的意义所在，是一种层次化的结构解决方案。

另外React中使用JSX，即JavaScript+XML,在实现上会更加专注，但是有一个对于新手来说很复杂的学习路径，那就是整个前端的技术方案实在是太庞大了。

因为浏览器无法识别JSX语法，所以需要另外一个工具来翻译，我们这里可以理解是babel,说到了babel,就需要用ES2016或者ES6的语法了，当然写一些翻译一些还不太方便，于是还有webpark结合babel-loader的方案，然后还可以继续下钻，所以我开始的时候感觉很清爽，但是发现前端的方案实在太多，以至于我觉得陷入了一个巨大的困扰中。

这是前端专家阮一峰在多年前的一个微博表述，前端的技术发展真是太快。

而看看现有的技术矩阵中，新技术和方案真是层出不穷。

我在之前的一篇文章中引用了一个图，如果理解Python web开发技术

现在看来后端对于前端的理解真是越来越少，后端对于前端的一个瓶颈就在于静态页面的基础，现在前端的动态内容如此丰富，这个难度和代沟会变得越来越大。所以前后端技术分离，做成RESTful接口也越来越受到欢迎。

所以我们对待前端技术还是要有一定的前瞻性，另外一个就是尽可能学习成熟快捷的方案，避免重复造轮子，经常返工，对架构进行重构。