add lifecycle methods of mounting and updating

tyawei · Dec 17, 2016 · c54060e · c54060e
1 parent da36c13
commit c54060e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/chapter-02/controlpanel/src/ControlPanel.js b/chapter-02/controlpanel/src/ControlPanel.js
@@ -6,13 +6,16 @@ const style = {
 };
 
 class ControlPanel extends Component {
-
   render() {
+    console.log('enter ControlPanel render');
     return (
       <div style={style}>
-        <Counter caption="First" />
+        <Counter caption="First"/>
         <Counter caption="Second" initValue={10} />
         <Counter caption="Third" initValue={20} />
+        <button onClick={ () => this.forceUpdate() }>
+          Click me to re-render!
+        </button>
       </div>
     );
   }

diff --git a/chapter-02/controlpanel/src/Counter.js b/chapter-02/controlpanel/src/Counter.js
@@ -7,6 +7,7 @@ const buttonStyle = {
 class Counter extends Component {
 
   constructor(props) {
+    console.log('enter constructor: ' + props.caption);
     super(props);
 
     this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
@@ -17,6 +18,28 @@ class Counter extends Component {
     }
   }
 
+  /*
+  getInitialState() {
+    console.log('enter getInitialState');
+  }
+
+  getDefaultProps() {
+    console.log('enter getDefaultProps');
+  }
+  */
+
+  componentWillReceiveProps(nextProps) {
+    console.log('enter componentWillReceiveProps ' + this.props.caption)
+  }
+
+  componentWillMount() {
+    console.log('enter componentWillMount ' + this.props.caption);
+  }
+
+  componentDidMount() {
+    console.log('enter componentDidMount ' + this.props.caption);
+  }
+
   onClickIncrementButton() {
     this.setState({count: this.state.count + 1});
   }
@@ -25,7 +48,13 @@ class Counter extends Component {
     this.setState({count: this.state.count - 1});
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return (nextProps.caption !== this.props.caption) ||
+           (nextState.count !== this.state.count);
+  }
+
   render() {
+    console.log('enter render ' + this.props.caption);
     const {caption} = this.props;
     return (
       <div>