React 仅仅只是你的界限

React 起源于Facebook内部项目，是一个用来构建用户界面的javascript库，相当于MVC架构中的V层框架，与市面上其他框架不同的是，React 把每一个组件当成了一个状态机，组件内部通过state来维护组件状态的变化，当组件的状态发生变化时，React通过虚拟DOM技术来增量并且高效的更新真实DOM。本文将对React的这些特点进行简单的介绍。

一个简单的React组件 —— HelloReact 

// 创建一个HelloReact组件
var HelloReact = React.createClass({
    render:function(){
        return (
            <div>
                 Hello React!
            </div>
        )
    }
});

// 使用HelloReact组件
ReactDOM.render(
    <HelloReact />,
    document.querySelector(‘body‘)
)

这样就定义了一个React组件，当然要运行这段代码是有条件的，需要引入React库，还需要引入JSX语法转换库，这里不多说了，这些基础的东西还需要各位亲自实践才好！

React 核心技术 —— 虚拟DOM（Virtual DOM）

React为此引入了虚拟DOM（Virtual DOM）机制：对于每一个组件，React会在内存中构建一个相对应的DOM树，基于React开发时所有的DOM构造都是通过虚拟DOM进行，每当组件的状态发生变化时，React都会重新构建整个DOM数据，然后将当前的整个DOM树和上一次的DOM树进行对比，得出DOM结构变化的部分(Patchs)，然后将这些Patchs 再更新到真实DOM中。整个过程都是在内存中进行，因此是非常高效的。借用一张图可以清晰的表示虚拟DOM的工作机制：

React 的生命周期

getDefaultProps —— 组件创建时

getInitialState —— 组件实例化状态

componentWillMount —— 组件挂载前

componentDidMount —— 组件挂载后

componentWillReceiveProps —— 组件属性被改变时

shouldComponentUpdate —— 组件是否更新

componentWillUpdate —— 组件更新前

componentDidUpdate —— 组件更新后

componentWillUnmount —— 组件销毁前

初始化

props 是在调用ReactDOM.render() 时通过标签属性xxx传递，然后通过 this.props.xxx 来获取，getDefaultProps允许你为组件设置一个默认的props值，在没有传递props的情况下显示默认值。

// 创建HelloReact组件
var HelloReact = React.createClass({
    /**
     * 当设置props的默认值 当没有传递时显示默认值
     * @return {}
     */
    getDefaultProps:function(){
       return {
           data:"暂无数据"
       }
    },
    render:function(){
        return (
            <div>
               //显示data，当props发生变化时会自动更新
               {this.props.data}
            </div>
        )
    }
});//传递props属性data
ReactDOM.render(
   <HelloReact data={"Hello React!"} />,
   document.querySelector(‘body‘)
)

和 props 不同的是，state不能通过外部传递，因此在使用state之前，需要在getInitialState中为state设置一个默认值，然后才能通过this.state.xxx来访问，当组件被挂载完成时，触发componentDidMount方法，我们可以在这里通过Ajax请求服务器数据，然后再通过setState()把state的值设置为真实数据。

// 创建HelloReact组件
var HelloReact = React.createClass({
    /**
     * 设置组件的初始值
     * @returns {{data: Array, msg: string}}
     */
    getInitialState:function(){
        return {
            data:"数据加载中..." //初始值为[]
        }
    },
    /**
     * 挂载后首次加载数据
     */
    componentDidMount:function(){
        this.requestData();//请求数据
    },
    /**
     * 请求后台数据
     */
    requestData:function(){
        $.ajax({
            url:‘xxxx.ashx‘,
            data:{},
            success:function(data){
                this.setState({
                    data:data  //通过setState()更新服务器数据
                })
            }
        }.bind(this))
    },
    render:function(){
        return (
            <div>
               {this.state.data}
            </div>
        )
    }
});
ReactDOM.render(
    <HelloReact  />,
    document.querySelector(‘body‘)
)

更新

相比props，state天生就是用来反映组件状态的，因此它的值是可以被改变的，当state的值被改变时，通过setState就可以改变state的值，React同样也是采用虚拟DOM技术来计算需要被更新的部分，而不是牵一发动全身的更新和渲染。

当props和state的状态发生变化后，组件在即将更新之前还会触发一个叫shouldConponentUpdate的方法，如果shouldConponentUpdate返回的是true，不管props和state的值和上一次相比有没有变化，React都会老老实实的进行对比。此时，如果你确定以及肯定两次数据没有变化，那就让shouldConponentUpdate返回false，React就不会进行diff了，更不会重新渲染了。瞬间省去了diff的时间，是不是很机智的说。

销毁

什么时候用props,什么时候用state

React 给前端带来的反思