React 中组件的生命周期

先上代码, react 用的是 15.0.1

<!DOCTYPE html>
<html>
  <head>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
    <style type="text/css">
      button{
        margin-right: 16px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/babel">
      var Child = React.createClass({
          getDefaultProps: function(){
            console.log('order 1 ==> getDefaultProps Child');
            return {}
          },

          getInitialState: function(){
            console.log("order 5 ==> getInitialState Child");
            return {
              val: 100
            }
          },

          componentWillMount: function(){
              console.log("order 6 ==> componentWillMount Child");
          },

          componentDidMount: function(){
              console.log("order 8 ==> componentDidMount Child");
          },

          // nextProps 是新的 Props
          componentWillReceiveProps: function(nextProps) {
              console.log( 'componentWillReceiveProps Child' );
          },

          shouldComponentUpdate: function() {
              console.log("shouldComponentUpdate Child");
              /*
                这里若为 false,
                则 触发更新的时候,
                componentWillUpdate, render, componentDidUpdate
                都不会触发
              */
              return true;
          },

          componentWillUpdate: function() {
              console.log("componentWillUpdate Child");
          },

          componentDidUpdate: function() {
              console.log("componentDidUpdate Child");
          },

          componentWillUnmount: function() {
              console.log("componentWillUnmount Child");
          },

          stateChange: function() {
              this.setState({
                  val: this.state.val - 1
              });
          },

          forceUpdateChild: function() {
              this.forceUpdate();
          },

          render: function() {
              console.log("order 7 ==> render Child");
              return(
                  <div>
                      <p>{"Props:"} {this.props.num}</p>
                      <p>{"State:"} {this.state.val}</p>
                  </div>
              );
          }
      });

      var Parent = React.createClass ({
          getDefaultProps: function(){
            console.log('order 2 ==> getDefaultProps Parent');
            return {

            }
          },

          getInitialState: function(){
            console.log("order 3 ==> getInitialState Parent");
            return {
              num: 0
            }
          },

          propsChange: function() {
              this.setState({
                  num: this.state.num+1
              });
          },

          componentWillUnmount: function() {
              console.log("componentWillUnmount Parent");
          },

          stateChange: function() {
              this.refs.rChild.stateChange();
          },

          forceUpdateChild: function() {
              this.refs.rChild.forceUpdateChild();
          },

          unmountChild: function() {
              // 这里卸载父组件也会导致卸载子组件
              ReactDOM.unmountComponentAtNode(document.getElementById("container"));
          },

          forceUpdateParent: function() {
              this.forceUpdate();
          },

          render: function() {
              console.log("order 4 ==> render Parent");
              return (
                  <div>
                      <button onClick={this.propsChange}>propsChange</button>
                      <button onClick={this.stateChange}>stateChange</button>
                      <button onClick={this.forceUpdateChild}>forceUpdateChild</button>
                      <button onClick={this.forceUpdateParent}>forceUpdateParent</button>
                      <button onClick={this.unmountChild}>unmount</button>
                      <Child ref="rChild" num={this.state.num}></Child>
                  </div>
              );
          }
      });

      ReactDOM.render(
          <Parent></Parent>,
          document.getElementById('container')
      );
    </script>
  </body>
</html>

 

 

1. 初始化

由于 getDefaultProps 并不是在组件实例化时被调用的，是在 React.createClass 调用时就被调用来了，返回值会被储存起来。

输出结果:
order 1 ==> getDefaultProps Child
order 2 ==> getDefaultProps Parent
order 3 ==> getInitialState Parent
order 4 ==> render Parent
order 5 ==> getInitialState Child
order 6 ==> componentWillMount Child
order 7 ==> render Child
order 8 ==> componentDidMount Child


2. 点击按钮 propsChange
改变自己的 state里的num, 同时由于 Child组件的props引用了 state里的num, 所以有触发 componentWillReceiveProps

输出结果:
order 4 ==> render Parent
componentWillReceiveProps Child
shouldComponentUpdate Child
componentWillUpdate Child
order 7 ==> render Child
componentDidUpdate Child


3. 点击按钮 stateChange
由于只改变了子组件的 state.

输出结果:
shouldComponentUpdate Child
componentWillUpdate Child
order 7 ==> render Child
componentDidUpdate Child


4. 点击按钮 forceUpdateChild

输出结果:
componentWillUpdate Child
order 7 ==> render Child
componentDidUpdate Child


5. 点击按钮 forceUpdateParent

输出结果:
order 4 ==> render Parent
componentWillReceiveProps Child
shouldComponentUpdate Child
componentWillUpdate Child
order 7 ==> render Child
componentDidUpdate Child


6. 点击按钮 unmount

输出结果:
componentWillUnmount Parent
componentWillUnmount Child

 

 

最后来个流程图:

流程图参考地址: http://www.race604.com/react-native-component-lifecycle/

 

posted @ 2017-03-20 16:22  zhengming  阅读(171)  评论(0)  编辑  收藏  举报