React入门

React是由Facebook前端工程师团队开发的一个框架，是因为Facebook对那时已经存在的框架都不太满意，所以就内部开启这个项目，然后在2013年开源。因为React 大部分的操作，都是虚拟 DOM 上发生，所以许多人都认为它仅仅是MVC中的View层，并不算完整的MVC框架。

安装

本地引入
下载链接： http://reactjs.cn/react/downloads/react-15.3.1.zip
因为React使用的是JSX语法，即在Js中直接插入HTML标签。所以还需要一个编译器browser.min.js(这种方式只适合在开发模式下，影响性能以及增加请求次数),然后通过标签引入

通过npm安装

npm i react react-dom --save

引入方式：

var React = require('React');
var ReactDOM = require('React-dom');

组件

在React中，我们可以将每一个功能模块当作是一个组件；
首先，让我们先创建一个组件

var Header = React.createClass({
    render:function(){
        return (
            <div className="header">
                <h2 className="title">操作区只有图标的头部</h2>
                <span className="regret yo-ico"></span>
                <span className="affirm">设置</span>
            </div>
        )
    }
})

注意：每个组件首字母必须大写;类名必须写成className;

module.exports=Header;

然后，再将接口暴露出来。

在这种前提下，其它组件就可以引入并调用;

var Header = require('./module/header.js');

在React中，每个组件只允许有一个根节点。

var App = React.createClass({
    render:function(){
        return (
            <div>
                <Header/>
                <Footer/>
            </div>
        )
    }
})

最后，在Dom中渲染出来。

ReactDOM.render(<App/>,document.getElementById('app'));

生命周期

React中有3个阶段的生命周期：
加载阶段

1. getDefaultProps
   设置默认属性
2. getInitialState
   设置初始状态值
3. componentWillMount
   组件将要进行加载
4. render
   渲染阶段
5. componentDidMount
   组件加载完成

更新阶段

1. componentWillReceiveProps
   组件即将接收属性时
2. shouldComponentUpdate
   组件是否要更新（必须返回Boolean值，否则报错）
3. componentWillUpdate
   组件将要进行加载
4. render
   必不可少的渲染阶段
5. componentDidUpdate
   组件更新完成

卸载阶段

1. componentWillUnmount
   组件卸载前

单向数据流

React中每次改变数据，都在重新渲染整个DOM。但React中有Diff算法，它将不更新的组件排除；

根据React写的一个小Demo：

1.gif