React筆記(元件生命週期)

參考資料

元件未插入真實DOM

componentWillMount()

• 元件Render前執行
• 只執行一次
• 在componentWillMount中做的事都可以放到constructor()中做

componentDidMount()

• 元件Render後執行
• 只執行一次
• render返回一個jsx物件-->react呼叫createElement()讀取該jsx物件屬性，用於構造虛擬DOM-->虛擬DOM插入文件，成為真實DOM

元件被重新渲染(更新的過程實質是子元件接收父元件引數後重新render的過程)

compentWillReceiveProps(nextprops)

• 父元件為子元件傳遞引數後，觸發子元件呼叫該函式(不管父元件的props是否改變)
• 寫日誌

componentWillReceiveProps(nextProps)
    {
        console,log("當前props日誌")
        console.log("current: "+this.props.name)
        console.log("next: "+nextProps.name)
    }

shouldComponentUpdate(nextProps, nextState)

• state或props改變時都會觸發
• 返回true時，啟用diff演算法(結合key)進行Virtual DOM的計算與比較，從而得出DOM樹的最小修改量，再交給componentWillUpdate()去執行
• 避免節點被重複渲染

 if(nextProps.item.name!==this.props.item.name)
                {
                return true;
                }
                else
                {
                    return false;
                }

componentWillUpdate()

元件移出真實DOM

componentDidUpdate()

• 執行完後觸發render

componentWillUnmount()

• 我們為元件註冊的事件必須在該函式中解除安裝