让我们一起学习React
React 是Facebook在2013 年开源在github上的javaScript库，React把用户界面抽象成一个个组件，如按钮组件Button、对话框组件Dialog、日期组件 Calemdar 开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入jsx语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React把代码和真实渲染目标隔离开来，除了可以再浏览器端渲染DOM来开发网页之外，还能用于开发原生移动应用。
1.1 专注于视图层
我们的应用已经变得前所未有的复杂，因而开发工具也必须变得越来越强大，和Angular等框架不同，React并不是完整的,,MVC/MVVM 框架，它专注于提供清晰、简洁的View（视图）层解决方案，而又与模板引擎不同，React不仅仅专注于view层的问题，又是一个包括view和controller的库，对于复杂的应用，可以根据业务场景自行选择业务层框架，并根据需要搭配Flux、redux来使用。
React不像其他框架那样提供； 许多复杂的概念与繁琐的API 它以Minimal API interface为目标只提供组件化相关的非常少量的API，同时为了保持灵活性，它没有自创一套规则，而是尽可能的让用户使用原生的javaScript进行开发，只要熟悉原生的javaScript并了解重要概念后，就可以很容易上手React应用。
1.2 VirtualDOM
真实页面对应一个DOM树，在传统页面开发模式中，每次需要更新页面的时候，都要手动操作DOM来进行更新，如图。
DOM操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是DOM更新操作，而且这部分代码会让整体项目代码变得难以维护。React把真实的DOM数转变成了javaScript对象树，也就是viretual DOM
每一次数据更新后，重新计算 viretual DOM 并和上一次生成的 viretual DOM 做对比，对发生变化的部分做批量的更新，React 也提供了直观的 shouldComponentUpdate 生命周期回调来减少数据变化后不必要的 viretual DOM对比过程，保证性能。
我们说 viretual DOM 提升了React的性能，但是这并不是React的唯一的亮点，此外viretual DOM的渲染方法也比传统的 DOM 操作好一些，但并不明显，因为对比DOM 节点也是需要计算资源的。
它最大的好处其实还在于方便和其他平台进行集成，比如React-native 是基于viretual DOM渲染出来的原生控件，因为React组件可以映射为对应的原生控件在输出的时候，是输出WEB DOM还是 Android控件 还是ios控件就由平台决定了，因此，React-native 有一个口号——learn once，write anywhere
1.3 函数式编程
在过去，工业界的编程方式一直是以命令式编程为主，命令式编程解决的是做什么的问题比如图灵机，而现代计算机就是一个经历了多次进化的高级图灵机，如果说人脑最擅长的是分析问题，那计算机擅长的是执行命令，电脑的运算速度明显快过人脑，命令式编程就像是在给电脑下命令，现在主要的编程语言（包括C和java）都是由命令式编程构建起来的。
而函数式编程，对应的是声明式编程，它是人类模仿自己的思考方式发明出来的，声明式编程的本质是lambda演算，试想当我们操作数据的每一个元素并返回一个新的数组的时候，如果是计算机的思考方式则是需要一个新的数组然后遍历原来的数组，并计算赋值；如果是人的思考方式，则是构建一个规则，这个过程就变成构建一个f函数作用在数组上，然后返回新的数组，这样，计算可以被重复利用。
2.1 JSX语法
当初学习React的时候，jsx是我们遇到的第一个新的概念，也许我们都是写习惯js程序的开发者，对于类似于静态编译并不感冒，早些年风靡前端的coffeescript也因为ES6标准化的加速推进，慢慢变成了茶语饭后的谈资，面对 React 我们又一次需要玩转一门新的静态转译语言，这一次，有什么不一样呢？
2.2 JSX的由来
JSX和React有什么关系呢？简单来说，React为了方便View层组件化，承载了构建HTML结构化页面的职责，“从这点上来看，React 与其他 javaScript 模板语言有着许多异曲同工之处，但不同之处在于 React 是通过创建与更新虚拟元素（virtual element）来管理整个 Virtual DOM 的。
其中，虚拟元素可以理解为和真实的元素的对应，它的构建与更新都是在内存中完成的，并不会影响真正渲染到DOM中去，在React中创建虚拟元素可以分为两类，DOM元素（DOM element） 与组件元素（component element）分别对应着原生DOM 元素和自定义元素，而JSX与创建元素的过程有着莫大的关联。
接着，我们从这两种元素的构建开始说起
-
1.DOM 元素
从过往的经验中知道，“Web 页面是由一个个 HTML 元素嵌套组合而成的。当使用javaScript来描述这些元素的时候，这些元素可以简单地被表示成纯粹的 JSON 对象。比如，现在需要描述一个按钮（button），这用 HTML 语法表示非常简单:<button class="btn btn-blue"> <em>Confirm</em> </button>其中包括了元素的类型和属性。如果转成 JSON 对象，那么依然包括元素的类型以及属性：
{ type: 'button', props: { className: 'btn btn-blue', children: [{ type: 'em', props: { children: 'Confirm' } }] } }这样，我们就可以在js中创建Virtual DOM 元素了。
在React中 到处都是可以复用的元素，这些元素并不是真实的实例，它只是让React告诉开发者，想要在屏幕上显示什么。我们无法通过方法去调用这些元素，他们只是不可遍的描述对象
- 组件元素
当然，我们可以很方便地封装上述的button 元素，得到一种构建按钮的公共方法：
const Button = ({ color, text }) => {
return {
type: 'button',
props: {
className: `btn btn-${color}`,
children: {
type: 'em',
props: {
children: text,
},
},
},
};
}
自然，当我们要生成 DOM 元素中具体的按钮时，就可以方便地调用 Button({color: 'blue', text: 'Confirm'}) 来创建。
仔细思考这个过程可以发现，Button 方法其实也可以作为元素而存在，方法名对应了 DOM 元素类型，参数对应了 DOM 元素属性，
那么它就具备了元素的两大必要条件，这样构建的元素就是自定义类型的元素，或者称之为组件元素。我们用JSON结构来描述它：
{
type: Button,
props: {
color: 'blue',
children: 'Confirm'
}
}
这也是 React 的核心思想之一。因为有公共的表达方法，我们就可以让元素们彼此嵌套或混合。这些层层封装的组件元素，就是所谓的 React 组件，最终我们可以用递归渲染的方式构建出完全的 DOM 元素树.
