react是什么?
react官网上说
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
react是灵活的，可以在各种项目中使用。您可以使用它创建新的应用程序，当然您也可以在不重写的情况下逐步将其引入到现有的代码库中。
总的来说：
- React 是一个用于构建用户界面的 JAVASCRIPT 库。
- React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
- React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
- React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
react的特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。
-
虚拟DOM(virtual dom)：我们知道js执行很快，耗费性能的部分是操作dom， react引入virtual dom的概念，当数据变化时，采用优化diff算法，对比virtual dom差异，精准更新dom。
这样做，不但解决了频繁操作dom的性能问题，还解放了开发人员。开发者不需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何render的，至于如何进行局部更新来保证性能，则是React要完成的事情。
除了性能的考虑，React引入虚拟DOM更重要的意义是提供了一种一致的开发方 式来开发服务端应用、Web应用和手机端应用：image因为有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容 渲染到不同的平台。而应用开发者，使用JavaScript就可以通吃各个平台了。相当棒的思路！
3.灵活−−React可以与已知的库或框架很好地配合。
4.JSX−JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件−通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
1.虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。例如，Facebook的instagram.com整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件，大家有兴趣可以看下它背后的代码。
2.如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别
3.对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。
- 组件化开发特性:React认为一个组件应该具有如下特征：
- 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
- 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
- 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；
- 可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。
6.单向响应的数据流−React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
react怎么用？
- 首先需要引入三个最基本的js库：
react.js -React的核心库
react－dom.js -提供雨dom相关的功能
browser.js -作用是将 JSX 语法转为 JavaScript语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
- 提供接口的dom节点
- 俩个重要的俩个对象ReactDOM.render()，React.createClass()
接下来先看一个最基本的案例：
- es5书写形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('example')
)
</script>
</body>
</html>
- es6书写形式：
import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>Hello world</div>
)
}
}
render(<App />, document.getElementById('app'));
参考文章可以见阮一峰老师的React入门实例教程
