文章參考

元件的生命週期可分成三個狀態：

1. Mounting：已插入真實 DOM
2. Updating：正在被重新渲染
3. Unmounting：已移出真實 DOM

例子

class Content extends React.Component {
//在渲染前呼叫,在客戶端也在服務端
  componentWillMount() {
      console.log('Component WILL MOUNT!')
  }
//在第一次渲染後呼叫，只在客戶端。之後元件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問
  componentDidMount() {
       console.
 
log('Component DID MOUNT!')
  }
//在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。
  componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
  }
//返回一個布林值。在元件接收到新的props或者state時被呼叫。在初始化時或者使用forceUpdate時不被呼叫。 
  shouldComponentUpdate(newProps, newState) {
        return true
 
;
  }
// 在元件接收到新的props或者state但還沒有render時被呼叫。在初始化時不會被呼叫 
  componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  }
//在元件完成更新後立即呼叫。在初始化時不會被呼叫。  
  componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  }
//在元件從 DOM 中移除之前立刻被呼叫。  
  componentWillUnmount
 
() {
         console.log('Component WILL UNMOUNT!')
  }
 
  render() {
    return (
  	<div>
  	  <h3>{this.props.myNumber}</h3>
  	</div>
    );
  }
}