React入门

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

安装

本地引入 下载链接： reactjs.cn/react/downl…

因为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：