【React】什么是react？react主要能做什么？
React来源于facebook的一个开源项目，目前在建造大型网站时十分通用。
1.Facebook为什么要建造React?
Facebook的工程师在做大型项目时，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解,所以Facebook认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。
基于上面的原因，Facebook认为MVC无法满足他们的扩展需求，为了解决上述问题需要“以某种方式组织代码，使其更加可预测”，于是他们提出的Flux和React来实现。
2.什么是React？
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
3.React能够解决什么问题？
React能够构建那些数据会随时间改变的大型应用，并且能够提高开发效率
4.React 特点
-
声明式设计 −React采用声明范式，可以轻松描述应用。
-
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
-
灵活 −React可以与已知的库或框架很好地配合。
-
JSX − JSX是 JavaScript语法的扩展。React开发不一定使用 JSX，但我们建议使用它。
-
组件 − 通过 React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
-
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
5.React主要的原理
传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是VirtualDOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。
为什么通过这多一层的Virtual DOM操作就能更快呢？ 这是因为React有个diff算法，更新VirtualDOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。
最明显的一点好处就是React所谓的 dom diff ，能够实现delta级别的dom更新。当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的dom diff 算法计算出不同点，然后以最小粒度进行更新。这也是React号称性能好的原因。
6.Components 组件
在DOM树上的节点被称为元素，在这里则不同，Virtual DOM上称为commponent。Virtual DOM的节点就是一个完整抽象的组件，它是由commponents组成。component的使用在 React 里极为重要, 因为 components 的存在让计算 DOM diff 更高效。
7.应用范围
国外应用的较多，facebook、Yahoo、Reddit等。在github可以看到一个列表Sites-Using-React：https://github.com/facebook/react/wiki/Sites-Using-React国内的话，查了查，貌似比较少，目前知道的有一个杭州大搜车。大多技术要在国内应用起来一般是较慢的。
8.比较分析
和其他一些js框架相比，比如Backbone、Angular等，React怎样?
1、React不是一个MVC框架，它是构建易于可重复调用的web组件，侧重于UI, 也就是view层
2、其次React是单向的从数据到视图的渲染，非双向数据绑定
3、不直接操作DOM对象，而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
4、不便于直接操作DOM，大多数时间只是对 virtual DOM 进行编程
9.和React Native的关系
由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web 开发的主流工具。
这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。
10.react的状态
React组件免不了不停的要与用户互动,一开始有一个初始状态，然后在与用户互动的过程中，用户的每个动作都可能触发状态机的变化，新的状态由不同的 React 元素展现。React 的一大创新,就是将组件看成是一个状态机State Machines,当状态发生改变时, React会在最有效的方式下更新DOM,重新渲染页面,让用户界面和数据保持一致。
10.1state工作原理
10.1.1存储状态
React在this.state中存储组件的状态
10.1.2设置状态的初始值
有两种设置 this.state初始值的方法：
如果创建组件使用 React.createClass方式,就用getInitialState方法初始化状态，例如
var scoreComponent=React.createClass({
getInitialState:function(){
return{
score:0
};
}
......
});
//如果创建组件是使用 ES6的 extends React.Component方法，在构造器中使用this.state初始化状态。例如：
class scoreComponent extends React.Component{
constructor(props){
super(props);
this.state ={score:60};
}
10.1.3 改变组件状态的方法
使用this.setState(data,callback)改变状态的值,这个方法可以把 data合并到 this.state，并且重新渲染了组件。data参数可以是对象也可以是返回包含要更新字段的对象的函数。可选的 callback会在组件重渲染后被调用。this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
10.1.4 state应该包含什么样的数据
UI交互会导致改变的数据。
10.1.5 state不应包含什么样的数据
1、计算过的数据
2、组件
3、从props复制的数据
state应保含最原始的数据，比如说时间，格式化应该交给展现层去做。
组件应在render方法里控制。
10.2state的开发实例
10.2.1计算点击次数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React状态机</title>
<script type="text/javascript" src="js/react.min.js" ></script>
<script type="text/javascript" src="js/react-dom.min.js" ></script>
<script type="text/javascript" src="js/browser.min.js" ></script>
</head>
<body>
<p id="example"></p>
<script type="text/babel">
var BtnButton = React.createClass({
getInitialState: function() {
return {count: 0};
},
handleClick: function(event) {
this.setState({count:this.state.count+1});
},
render: function() {
var text =this.state.count ;
return (
<p onClick={this.handleClick}>
获取点击的次数<br />
<span>{text}</span>
</p>
);
}
});
ReactDOM.render(
<BtnButton />,
document.getElementById('example')
);
</script>
</body>
</html>
以上实例中创建了BtnButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
11.JSX
11.1什么是JSX？
在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件的结构和组件之间的关系看上去更加清晰。
var MyComponent = React.createClass({/*...*/});
var myElement = <mycomponent someproperty="{true}">;
React.render(myElement, document.body);
</mycomponent>
一个XML标签，比如会被JSX转换工具转换成什么呢？
比如：
var Nav = React.createClass({/*...*/});
var app = <nav color="blue"><profile>click</profile></nav>;
转化为：
var Nav = React.createClass({/*...*/});
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);
那么也就是说，我们写一个XML标签，实质上就是在调用React.createElement这个方法，并返回一个ReactElement对象。
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)
这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。
11.2 JSX转换器
要把带有JSX语法的代码转化为纯Javascript代码，有多种方式，对于内联与HTML中的代码或者是未经过转化的外部文件，在script标签中要加上type=“text/jsx”，并引入JSXTransformer.js文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用npm全局安装react-tools：
npm install -g react-tools
并使用命令行工具转化即可（具体用法可以参考jsx -h）：
jsx src/ build/
如果使用自动化工具，比如gulp的话，可以使用相应插件gulp-react。
11.3HTML模板中使用JS
在HTML模板中使用JS非常方便，只需要用大括号把JS代码括起来即可。
var names = ['Alice', 'Emily', 'Kate'];
React.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
编译出来就变成了这样：
var names = ['Alice', 'Emily', 'Kate'];
React.render(
React.createElement("div", null, names.map(function (name) {
return React.createElement("div", null, "Hello, ", name, "!")
}) ),
document.getElementById('example')
);
要注意的是，大括号实际就是一个变量输出表达式，JSX最终就是直接把花括号中的内容作为 React.createElement 的第三个参数直接传入了（没有任何修改直接传入），所以其中只能放一行表达式，并且任何不能直接作为第三个参数的写法都是错的，那么你这样写就是错的：
React.render(
<div>
{
var a = 1;
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
因为很明显其中花括号内的内容直接放在第三个参数上，语法不对。
这么写也是错的：
React.render(
<div>
{
var a = 1;
}
</div>,
document.getElementById('example')
);
因为 React.createElement(“div”, null, var a = 1;) 是语法错误。
那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。
需要注意的是，如果你在属性中输出JS变量，是不能加引号的，不然会被当做字符串而不被解析。
应该是这样：
<a title="{title}">链接</a>
11.4使用HTML标签
要创建一个HTML标准中存在的元素，直接像写HTML代码一样即可：
var myDivElement = <div classname="foo">;
React.render(myDivElement, document.body);
</div>
不过需要注意的是class和for这两个属性，JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样，用className和htmlFor。
还有一点是，在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加data-前缀。
<div data-custom-attribute="foo">
</div>
11.5命名空间式组件
比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：
var Form = MyFormComponent;
var App = (
<form>
<form.row>
<form.label>
<form.input>
</form.input></form.label></form.row>
</form>
);
这样你只需将子组件的ReactClass作为其父组件的属性：
var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });
而创建子元素可以直接交给JSX转化器：
var App = (
React.createElement(Form, null,
React.createElement(Form.Row, null,
React.createElement(Form.Label, null),
React.createElement(Form.Input, null)
)
)
);
该功能需要0.11及以上版本
11.6Javascript表达式
在JSX语法中写Javascript表达式只需要用{}即可，比如下面这个使用三目运算符的例子：
// Input (JSX):
var content = <container>{window.isLoggedIn ? <nav> : <login>};
// Output (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
</login></nav></container>
不过要注意的是，JSX语法只是语法糖，它的背后是调用ReactElement的构造方法React.createElement的，所以类似这样的写法是不可以的：
// This JSX:
<div id="{if" (condition)="" {="" 'msg'="" }}="">Hello World!</div>
// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：
if (condition) <div id="msg">Hello World!</div>
else <div>Hello World!</div>
11.7传播属性（Spread Attributes）
在JSX中，可以使用…运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个…运算符的实现类似于ES6 Array中的…运算符的特性。
var props = { foo: x, bar: y };
var component = <component {="" ...props="" }="">;
</component>
这样就相当于：
var component = <component foo="{x}" bar="{y}">
</component>
它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
var props = { foo: 'default' };
var component = <component {...props}="" foo="{'override'}">;
console.log(component.props.foo); // 'override'
</component>