React生命週期——各週期的特色

在組件的整個生命週期中，隨着該組件的props或者state發生改變，其DOM表現也會有相應的變化。一個組件就是一個狀態機，對於特定地輸入，它總返回一致的輸出。

組件的生命週期可分紅三個狀態：

• Mounting：已插入真實 DOM
• Updating：正在被從新渲染
• Unmounting：已移出真實 DOM

第一個狀態（實例化期）

• getDefaultProps: 對於每一個組件實例來說，這個方法只會調用一次，可用於設置默認的 props值
• getInitialState：這個方法的調用有且只有一次，用來初始化每一個實例的 state
• componentWillMount：render 方法調用以前修改 state 的最後一次機會,能夠用來將props的參數設置到state裏面去
• componentDidMount：
  1. 該方法被調用時，已經渲染出真實的 DOM，能夠再該方法中經過 this.getDOMNode() 訪問到真實的 DOM(推薦使用 ReactDOM.findDOMNode())
  2. 不會在服務端被渲染的過程當中調用（能夠用來獲取canvas的id/ref等）
  3. 頁面已經被加載完，用來監聽頁面

render（渲染頁面）

第二個狀態（存在期）

• componentWillReceiveProps（nextProps）：
  1. 在這個方法裏更新 state,以觸發 render 方法從新渲染組件
  2. 用來監聽props的變化（須要監聽變化的值存入state裏面對比）

if(nextProps .x !== this.state.x ){
    
    }
複製代碼

• shouldComponentUpdate：若是你肯定組件的 props 或者 state 的改變不須要從新渲染，能夠經過在這個方法裏經過返回 false 來阻止組件的從新渲染，返回 `false 則不會執行 render 以及後面的 componentWillUpdate，componentDidUpdate 方法
• componentWillUpdate：
  1. 在組件接收到了新的 props 或者 state 即將進行從新渲染前，componentWillUpdate(object nextProps, object nextState) 會被調用
  2. 不要在此方面裏再去更新 props 或者 state

第三個狀態（銷燬期）

• componentDidUpdate：在組件從新被渲染以後，componentDidUpdate(object prevProps, object prevState) 會被調用。能夠在這裏訪問並修改 DOM
• componentWillUnmount:
  1. 每當React使用完一個組件，這個組件必須從 DOM 中卸載後被銷燬，此時 componentWillUnmout 會被執行，完成全部的清理和銷燬工做，在 componentDidMount 中添加的任務都須要再該方法中撤銷，如建立的定時器或事件監聽器
  2. 刷新瀏覽器時沒有卸載組件，只有離開頁面纔會卸載
  3. 離開頁面時卸載組件，清空state裏面的值

componentWillUnmount(){ 
            //重寫組件的setState方法，直接返回空
            this.setState = (state,callback)=>{
            return;
            };  
        }
複製代碼

參考：segmentfault.com/a/119000000…