转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：http://www.jb51.cc/article/p-werjyqsh-bpo.html

React是Facebook推出的一个用于创建用户界面的JavaScript库,是现在最热门的前端框架。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）,使用它的目的在于能够构建随着时间数据不断变化的大规模应用。React使用非常的灵活,你可以新建一个项目使用它,也可以把它引入到一个已有的代码库或者是项目中,它可以与已知的库或框架很好的配合使用。React为了更好的性能而使用虚拟DOM实现,虚拟DOM安插在JavaScript逻辑和实际的DOM之间,在渲染过程中通过对虚拟DOM的操作来实现对实际DOM的局部更新,最大限度的减少与DOM的交互,它同时也可以在服务器端使用NodeJs渲染,从而不需要过重的浏览器DOM支持。React实现了单向响应的数据流-单向数据流,让数据显示流动,使你理解应用如何工作变的简单,但是它确实比传统双向数据绑定要多一些代码。React是基于组件化和模块化的,它可以构建可复用的组件,每个组件都可以进行单独的测试和开发,而且可以嵌套使用,不仅提高了代码的可维护性也提高编写代码效率。JSX是JavaScript语法的扩展,但是React开发不一定要使用JSX,只是推荐使用。

1.生命周期
React是基于组件的构建和封装你的组件,构建封装你的组件，管理好你的状态state,使其变成一个多个组件组成的复杂交互界面。因为是使用的jsx语法，js和html是在一起的.可以更好的控制状态来更新DOM。
React适合非常轻松的创建交互界面. 设计一个简单的状态机在你的应用程序里,当数据发生改变时,可以有效及正确的更新和呈现你的组件。React的每个组件都有自己的生命周期,通过生命周期钩子函数去响应不同的时刻,组件的生命周期分为三个部分:(1)实例化 (2)存在期 (3)销毁&清理器。各个生命周期的方法如下图所示:

//1.创建阶段  也就是类创建的时候调用
getDefaultProps(){
    console.log('getDefaultProps' + " === LeftCycle");


},//2.实例化阶段
getInitialState(){
    console.log('getInitialState');
    return {
        userName:'111'
    };
},//3.render之前调用，一般业务逻辑都应该放在这里，如对state的操作等
componentWillMount(){
    console.log('componentWillMount');
},//渲染并返回一个虚拟DOM
render(){
    console.log('render');
    return <div>
        SMZQ{this.state.userName}

        <input onChange={(event)=>{
            //console.log(event.target.value);
            this.setState({userName:event.target.value});
        }}/>

    </div>
},//4.用于网络请求和操作DOM,因为该方法之前真实的DOM已经渲染完成
componentDidMount(){
    console.log('componentDidMount');
}

getDefaultProps === LeftCycle
getInitialState
componentWillMount
render
componentDidMount

//更新阶段 当组件接收到新的props时触发
componentWillReceiveProps(){
    console.log('componentWillReceiveProps');
},//是否需要更新
shouldComponentUpdate() {
    console.log('shouldComponentUpdate');
    return true;
},//将要更新
componentWillUpdate(){
    console.log('componentWillUpdate');
},//更新之后
componentDidUpdate() {
    console.log('componentDidUpdate');
}

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

//销毁阶段
componentWillUnmount(){
    console.log('componentWillUnmount');
}

componentWillUnmount

let React = require('react');

const LeftCycle = React.createClass({

    //1.创建阶段  也就是类创建的时候调用
    getDefaultProps(){
        console.log('getDefaultProps' + " === LeftCycle");

    },//2.实例化阶段
    getInitialState(){
        console.log('getInitialState');
        return {
            userName:'111'
        };
    },//3.render之前调用，一般业务逻辑都应该放在这里，如对state的操作等
    componentWillMount(){
        console.log('componentWillMount');
    },因为该方法之前真实的DOM已经渲染完成
    componentDidMount(){
        console.log('componentDidMount');
    },//更新阶段 当组件接收到新的props时触发
    componentWillReceiveProps(){
        console.log('componentWillReceiveProps');
    },//是否需要更新
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate');
        return true;
    },//将要更新
    componentWillUpdate(){
        console.log('componentWillUpdate');
    },//渲染并返回一个虚拟DOM
    render(){
        console.log('render');
        return <div>
            SMZQ{this.state.userName}

            <input onChange={(event)=>{
                //console.log(event.target.value);
                this.setState({userName:event.target.value});
            }}/>

        </div>
    },//更新之后
    componentDidUpdate() {
        console.log('componentDidUpdate');
    },//销毁阶段
    componentWillUnmount(){
        console.log('componentWillUnmount');
    }
});

module.exports = LeftCycle;

React组件的生命周期(LeftCycle)详解

博客地址：http://www.jb51.cc/article/p-werjyqsh-bpo.html