ReactNative--组件的声明周期

1 组件的生命周期可分为三个状态：

Mounting：组件挂载，已插入真实DOM

updating：组件更新，正在被重新渲染

unmounting：组件移出，已移出真实DOM

2 组件的生命周期可分成四个阶段：

创建，实例化，更新，销毁

 

  <script type="text/babel">

  //在此写React代码

    var Demo = React.createClass({

      /*
        一，创建阶段
        流程：
          只调用getDefaultProps方法
      */
      getDefaultProps:function () {
        //在创建的时候调用，设置this.props的默认值
        console.log("getDefaultProps");
        return {};
      },

      /*
        二 实例化阶段
        流程：
          getInitialState
          componentWillMount
          render
          componentDidMount
      */
      getInitialState: function () {
        //设置this.state的默认值
        console.log("getInitialState");
        return null;
      },
      componentWillMount:function () {
        //在render之前调用
        console.log("componentWillMount");
      },
      render:function () {
        //渲染并返回一个虚拟DOM
        console.log("render");
        return <div>hello react</div>
      },
      componentDidMount:function () {
        //render之后调用
        //在该方法中，React会使用render方法返回的虚拟DOM对象创建真是的DOM结构
        //可以在这个方法中读取DOM节点
        console.log("componentDidMount");
      },
      /*
        三 更新阶段
        流程：
          componentWillReceiveProps
          shouldComponentUpdate 如果返回值是false，后三个方法不执行
          componentWillUpdate
          render
          componentDidUpdate
      */
      componentWillReceiveProps:function () {
        console.log("componentWillReceiveProps");
      },
      shouldComponentUpdate:function () {
        console.log("shouldComponentUpdate");
        return true;
      },
      componentWillUpdate:function () {
        console.log("componentWillUpdate");
      },
      componentDidUpdate:function () {
        console.log("componentDidUpdate");
      },
      /*
        四 销毁阶段
        流程：
          componentWillUnmount
      */
      componentWillUnmount:function () {
        console.log("componentWillUnmount");
      }


    });

    //第一次创建并加载组件
    ReactDOM.render(
      <Demo />,
      document.getElementById("container")
    );


  </script>