对React.js框架的初步认识
一、React.js产生的背景
React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，过程中发现，对于复杂前端HTML5性能明显下降，达不到预期的效果。在经过对市场上所有JavaScriptMVC框架调研后，Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，找不到满足自己产品的要求，于是react开始被开发。
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。
由于React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单， React是一个纯View层，不擅长于和动态数据打交道。React很擅长于处理组件化的页面，因此用上React的项目需求常规为界面组件化。
Reactd 的特点：1虚拟DOM，2.组建化。例如：
<script type="text/babel">
var Login = React.createClass({
getInitialState: function() {
return {
};
},
render: function() {
return React.createElement('h1',null,'hello world ');
}
});
ReactDOM.render(
React.createElement(Login,null),
document.getElementById('example')
);
</script>
ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。
可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件；要对某些值的变化做DOM操作的，要把这些值放到state中。
注意：1为组件添加外部css样式时，类名应该写成className而不是class; for应该写成htmlFor。
2组件名称首字母必须大写。
二、reactjs使用
Reactjs的运行基础环境非常简单，只需要在HTML文件中引入js（主要的
react.js， jquery.min.js， react-dom.js ， browser.min.js）文件即可开始工作。
首先，在官网https://facebook.github.io/react/中下载最新的压缩包，解压后如下图所示：
点开build文件如下所示的js样式
将build文件放到HTML文件下js中，然后在HTML中引入需要的js文件。
还需要一个css进行编译如下图
这个也需要引入并且放在第一行。这样的话react的环境已经搭建好了。
下面写一个完整hello world的例子。
首先写一个HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>react的例子</title>
</head>
<body >
Hello world
</body>
</html>
然后在HTML中引入js文件
<link rel='stylesheet' href='../assets/css/base.css'>
<script src="../assets/js/build/react.js" ></script>
<script src="../assets/js/build/jquery.min.js"></script>
<script src="../assets/js/build/react-dom.js"></script>
<script src="../assets/js/build/browser.min.js"></script>
下一步就是在body中写需要渲染的内容，以一对<div>开头，
<div id="example"></div>
<script type="text/babel">
var Login = React.createClass({
getInitialState: function() {
console.log(8888);
return{
};
},
render: function() {
return React.createElement('h1',null,'hello world ');
}
});
ReactDOM.render(
React.createElement(Login,null),
document.getElementById('example')
);
</script>
通过这个例子，我们看到通过调用React.createClas方法创建了一个组件类Login，这个组件类包含了一个render函数，该函数通过调用React.createElement实现了HTML内容的输出。
创建好的组件类Login随后被ReactDOM.render函数所调用。该函数将调用React.createElement('h1',null,'hello world ')所生成的组件“挂接”到浏览器DOM中的div标签下，从而实现最终在浏览器的输出。
组建的主要成员：
1、state成员
组件总是需要与用户互动，React 把用户界面当作简单状态机，用户界面拥有不同状态，然后渲染这些状态，可以轻松让用户界面和数据保持一致。于是主要工作就是定义state，并根据不同的state渲染对应的用户界面。
当创建一个状态化的组件时，并只把这些数据状态存入this.state。在 render() 里再根据state的变化生成新的状态。React 里，只需更新组件的state，然后根据新的state重新渲染用户界面。
将初始化的状态定义在getInitialState函数中
访问state数据的方法是“this.state.属性名”
变量用｛｝，不需要加双引号 例子yong.html
2、render成员函数
对于组件来说，render成员函数是必须的。在使用React进行构建应用时，我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上，将任务交给浏览器，这个函数就是React.render()。
3组件的生命周期
组件的生命周期分成三个状态：实例化阶段，活动阶段，销毁阶段。
Mounting表示正在挂接虚拟DOM到真实DOM，updating表示正在被重新渲染，unmounting表示正在将虚拟DOM移除真实DOM。
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用。
实例化阶段的函数有：
1. getInitialState 用来初始化各种变量。
2.componentWillMount在组件将要挂载到DOM中执行，这个函数我基本上很少用到。
3.componentDidMount组件已经加载到DOM中会执行这个函数,在这个函数中可以初始化一些将要执行的函数，在React生命周期中只会执行一次。在开发中,在该函数中执行的setState，在随后通过this.state并不能够马上拿到,可以通过定时来获取。
活动阶段：
1.shouldComponentUpdate这个函数提供给我们这些开发者是否允许数据源发生改变后去执行Render的控制权。默认这个函数始终返回true。返回false的话,render函数不会执行，,componentWillUpdate和componentDidUpdate也不会执行。可以在这个函数中去执行逻辑判断,是否有必要去执行Render。
2.componentWillUpdate组件将要更新执行。可以在这个函数中清理在componentDidUpdate绑定的事件(这个方式很有用)。
3.componentDidUpdate组件已经更新执行这个操作。可以在这个函数中初始化需要state中的数据源作为参数的函数。为了防止初始化多次,可以在componentWillUpdate中清理。
销毁阶段：
componentWillUnmount组件从DOM中移除会执行这个函数,在此可以清理无用的DOM和事件。
三、react的优点
组件化
简单，使用便捷
React可以创建存放组件的虚拟DOM（文档对象模型Document Object Model），这一特点为开发人员提供了高度灵活性，因为React能够提前计算出DOM中哪些内容需要更改，并对DOM树做出相应地更新。通过这种方式，从而大幅提升了工作效率。
