react生命週期

初始化

一、constructor

            constructor參數接受兩個參數props,context

            能夠獲取到父組件傳下來的的props,context,若是想在constructor構造函數內部( 注意是內部哦，在組件其餘地方是能夠直接接收的 )使用props或context,則須要傳入，並傳入super對象。

 

二、componentWillMount

            1）組件剛經歷constructor,初始完數據

            2）還未進入render，組件還未渲染完成，dom還未渲染

                    componentWillMount 通常用的比較少，更多的是用在服務端渲染        

            ajax請求能寫在willmount裏嗎？

                    1.雖然有些狀況下並不會出錯，可是若是ajax請求過來的數據是空，那麼會影響頁面的渲染，可能看到的就是空白。

                    2.不利於服務端渲染，在同構的狀況下，生命週期會到componentwillmount，這樣使用ajax就會出錯

 

三、render

            render函數會插入jsx生成的dom結構，react會生成一份虛擬dom樹，在每一次組件更新時，在此react會經過其diff算法比較更新先後的新舊DOM樹，比較之後，找到最小的有差別的DOM節點，並從新渲染

            react16中 render函數容許返回一個數組，單個字符串等，不在只限製爲一個頂級DOM節點，能夠減小不少沒必要要的div

 

四、componentDidMount

        組件第一次渲染完成，此時dom節點已經生成，能夠在這裏調用ajax請求，返回數據setState後組件會從新渲染

 

更新

一、shouldComponentUpdate(nextProps,nextState)

            惟一用於控制組件從新渲染的生命週期，因爲在react中，setState之後，state發生變化，組件會進入從新渲染的流程，在這裏return false能夠阻止組件的更新

            由於react父組件的從新渲染會致使其全部子組件的從新渲染，這個時候其實咱們是不須要全部子組件都跟着從新渲染的，所以須要在子組件的該生命週期中作判斷

 

二、componentWillUpdate(nextProps,nextState)

            shouldComponentUpdate返回true之後，組件進入從新渲染的流程，進入componentWillUpdate,這裏一樣能夠拿到nextProps和nextState

 

三、componentDidUpdate(prevProps,prevState)

            組件更新完畢後，react只會在第一次初始化成功會進入componentDidmount,以後每次從新渲染後都會進入這個生命週期，這裏能夠拿到prevProps和prevState，即更新前的props和state。

 

四、componentWillReceiveProps(nextProps)

            componentWillReceiveProps在接受父組件改變後的props須要從新渲染組件時用到的比較多

它接受一個參數

 

nextProps

          經過對比nextProps和this.props，將nextProps setState爲當前組件的state，從而從新渲染組件

 

卸載

componentWillUnmount

 componentWillUnmount也是會常常用到的一個生命週期，初學者可能用到的比較少，可是用好這個確實很重要的哦

        1.clear你在組建中全部的setTimeout,setInterval

        2.移除全部組建中的監聽 removeEventListener

        3.也許你會常常遇到這個warning:

               Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component.

               This is a no-op. Please check the code for the undefined component.

 

            是由於你在組建中的ajax請求返回中setState,而你組件銷燬的時候，請求還未完成，所以會報warning，解決辦法爲

               componentDidMount() { this.isMount === true axios.post().then((res) => { this.isMount && this.setState({

               // 增長條件ismount爲true時 aaa:res }) }) } componentWillUnmount() { this.isMount === false }