引言

我们知道对于传统的web开发方式是通过服务器或者用户输入的交互数据高效的动态的反映到复杂的用户界面上，但是随着项目的越来越大，造成难以维护或者力不从心。基于此，涌现出了许多优秀的开源框架，如谷歌的Angular、Facebook的React等，本篇文章只是我对React学习过程的一个记录，现在想想自己当初选择学习react原因可能......

React介绍

• React 是一个用于构建用户界面的 JAVASCRIPT 库。
• React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
• React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特点

1. 声明式设计：React采用声明范式，可以轻松描述应用。
2. 高效 ：React通过Virtual DOM，最大限度地减少与DOM的交互。
3. 灵活 ：React可以与已知的库或框架很好地配合。
4. JSX ： JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但建议使用它。
5. 组件 ：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流：React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

上面的话可能有点多余，下面就正式开始介绍React基础知识及使用。

---

Virtual DOM（虚拟DOM）

为什么引入Virtual DOM？

在介绍Virtual DOM之前不得不说一下什么是DOM，DOM，Document Object Model，即文档数据模型，它是针对XML但经过扩展用于HTML的应用程序编程接口（API）。真实页面对应一个DOM树，当页面需要更新时，借助DOM提供的API，可以对其进行更新，但是这样做很消耗性能，会使项目变得难以维护，而React把真实的DOM树转换成Javascript对象树，即在浏览器端用Javascript实现了一套DOM API，这就是Virtual DOM。在使用React开发时，当需要对真实DOM进行修改时，先对Virtual DOM进行修改，再和真实的DOM进行比较，在真实DOM中只改变需要改变的地方，即只改变局部，不改变整体，因此对系统性能的消耗较小，对Virtual DOM的修改会在状态改变时触发。二者之间的比较是基于diff算法，若想详细了解React算法的，请查看知乎上的这篇文章。

---

JSX

什么是JSX？

JSX，全称Javascript XML， 是一个类 XML 的 JavaScript 语法扩展，提供了一种在JavaScript中编写声明式的XML的方法。JSX是React的核心组成部分,官方推荐使用它， 当然如果你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。可以使用babel在线编译工具将JSX转化成原生Javascript语言。
下面是一个简单的例子：
JSX代码：

<Hello color="blue">
  Hello world
</Hello>

使用babel工具编译后代码：

React.createElement(
  Hello,
  { 
    color: "blue"
 },
  "Hello world"
);

---

组件

组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。

例，通过以下代码创建一个简单的<Hello/>组件：

var Hello = React.createClass({
  render: function() {
    return <h1>Hello World</h1>;
  }
});
 
ReactDOM.render(
  <Hello />,
  document.getElementById('example')
);

这里用到了React.createClass方法构建了一个组件对象，用ReactDOM.render方法将创建的组件插入到页面中，有关这些介绍会在以后的文章中介绍。