第七讲 React的生命周期

Sian

1、生命周期的三个状态：
1.1、Mounting：组件挂载，已插入真实DOM
1.2、Updating：组件更新，正在被重新渲染
1.3、Unmounting：组件移除，已移出真实DOM

2、四个阶段，分别是：创建阶段-->实例化阶段-->更新阶段-->销毁阶段

3、相关方法
3.1、Mounting/组件挂载相关：

• componentWillMount
  组件将要挂载，在render之前执行，但仅执行一次！
• componentDidMount
  组件已经挂载，在render执行之后，同样只执行一次！
  

3.2、Updating/组件更新相关：

• componentWillReveiveProps
  已经加载的组件在接收新(非初始化，而是更新)的属性时调用
• shouldComponentUpdate
  在接收到新的state或prpos时调用，返回bool值决定下面两个方法是否执行
• componentWillUpdate
• componentDidUpdate
  

3.3、Unmounting/组件移除相关

• componentWillUnmount
  

4、实例
4.1、创建阶段

• getDefaultProps
• 4.2、实例化阶段
• getInitialState
• componentWillMount
• render
• componentDidMount
  

4.3、更新阶段

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate
  

4.4、销毁阶段

• componentWillUnmount
  

5、代码演示

[JavaScript] 纯文本查看 复制代码

/**
     * React生命周期
     1、三个状态：
        Mounting：组件挂载，已插入真实DOM
        Updating：组件更新，正在被重新渲染
        Unmounting：组件移除，已移出真实DOM


     2、四个阶段，分别是：创建阶段-->实例化阶段-->更新阶段-->销毁阶段


     3、相关方法
        3.1、Mounting/组件挂载相关：
          A>componentWillMount
            组件将要挂载，在render之前执行，但仅执行一次，即使多次重复渲染或改变state也只执行一次
          B>componentDidMount
            组件已经挂载，在render执行之后，同一个组件重复渲染只执行一次

        3.2、Updating/组件更新相关：
          A>componentWillReceiveProps
            已加载组件将要接收到新的props之前调用(更新)，组件初始化时不会执行！
          B>shouldComponentUpdate
            组件接收到的新的props或state时执行，返回bool值来决定是否更新，并决定下面两个方法是否执行
          C>componentWillUpdate
            组件将要更新
          D>componentDidUpdate
            组件已经完成更新

        3.3、Unmounting/组件移除相关方法
          A>componentWillUnmount
            组件将要被移除时调用，用来执行一些必要的清理工作

        3.4、生命周期中props与state相关
          A>getDefaultProps 设置Props的默认属性值
          B>getInitialState 设置state的默认属性值


      4、代码示例
     */

     var Demo = React.createClass({
       /**
        * 一、创建阶段
        1、getDefaultProps方法
        */
        getDefaultProps:function(){
          console.log("getDefaultProps");
          return{};
        },
        /**
         * 二、实例化阶段
         1、getInitialState
         2、componentWillMount
         3、render
         4、componentDidMount
         */
         getInitialState:function(){
           console.log("getInitailState");
           return {
             name : "sian"
           }
         },
         componentWillMount:function(){
           console.log("componentWillMount");
         },
         render:function(){
           console.log("render");
           var text = this.state.name;
           return <p>Hello {text}!</p>;
         },
         componentDidMount:function(){
           console.log("componentDidMount");
         },
         /**
          * 三、更新阶段
          1、componentWillReceiveProps
          2、shouldComponentUpdate
          3、componentWillUpdate
          4、render
          5、componentDidUpdate
          */
          componentWillReceiveProps:function(){
            console.log("componentWillReceiveProps");
          },
          shouldComponentUpdate:function(){
            console.log("shouldComponentUpdate");
            return true;
          },
          componentWillUpdate:function(){
            console.log("componentWillUpdate");
          },
          componentDidUpdate:function(){
            console.log("componentDidUpdate");
          },
          /**
           * 四、销毁阶段
           1、componentWillUnmount
           */
          componentWillUnmount:function(){
            console.log("componentWillUnmount");
          }
     });
     console.log("第一次创建并加载组件");
     ReactDOM.render(
       <Demo />,
       document.getElementById("container")
     );
     console.log("重新渲染组件");
     ReactDOM.render(
       <Demo />,
       document.getElementById("container")
     );
     console.log("销毁组件");
     ReactDOM.unmountComponentAtNode(document.getElementById("container"));

5.1、控制台输出的结果为：

[JavaScript] 纯文本查看 复制代码

getDefaultProps
第一次创建并加载组件
getInitailState
componentWillMount
render
componentDidMount
重新渲染组件
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁组件
componentWillUnmount

6、在线效果演示：http://www.yusian.com/react/lifecycle/index.html