react 生命週期

標籤：asc   組件   數組   意思   事件監聽   變化   only   拓展   .post   

• 初始化

1、getDefaultProps()

設定預設的props，也可以用dufaultProps設定組件的預設屬性.

2、getInitialState()

在使用es6的class文法時是沒有這個鉤子函數的，可以直接在constructor中定義this.state。此時可以訪問this.props

3、componentWillMount()

組件初始化時只調用，以後組件更新不調用，整個生命週期只調用一次，此時可以修改state。

4、 render()

react最重要的步驟，建立虛擬dom，進行diff演算法，更新dom樹都在此進行。此時就不能更改state了。

5、componentDidMount()

組件渲染之後調用，只調用一次。

• 更新

6、componentWillReceiveProps(nextProps)

組件初始化時不調用，組件接受新的props時調用。

7、shouldComponentUpdate(nextProps, nextState)

react效能最佳化非常重要的一環。組件接受新的state或者props時調用，我們可以設定在此對比前後兩個props和state是否相同，如果相同則返回false阻止更新，因為相同的屬性狀態一定會產生相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比，節省大量效能，尤其是在dom結構複雜的時候

8、componentWillUpdata(nextProps, nextState)

組件初始化時不調用，只有在組件將要更新時才調用，此時可以修改state

9、render()

組件渲染

10、componentDidUpdate()

組件初始化時不調用，組件更新完成後調用，此時可以擷取dom節點。

• 卸載

11、componentWillUnmount()

組件將要卸載時調用，一些事件監聽和定時器需要在此時清除。

  下面我從constructor建構函式開始，從參數，作用，用法各方面總結1、constructor

constructor參數接受兩個參數props,context
可以擷取到父組件傳下來的的props,context,如果你想在constructor建構函式內部(注意是內部哦，在組件其他地方是可以直接接收的)使用props或context,則需要傳入，並傳入super對象。

 constructor(props,context) {  super(props,context)  console.log(this.props,this.context) // 在內部可以使用props和context}

當然如果你只需要在建構函式內使用props或者context，那麼只傳入一個參數即可，如果都不可以，就都不傳。

關於ES6的class constructor和super

只要組件存在constructor,就必要要寫super,否則this指向會錯誤

 constructor() {  console.log(this) // 報錯，this指向錯誤}

2、componentWillMount 組件將要掛載

1、組件剛經曆constructor,初始完資料
2、組件還未進入render，組件還未渲染完成，dom還未渲染

componentWillMount 一般用的比較少，更多的是用在服務端渲染，（我還未使用過react服務端渲染哈，所以也寫不了很多）
但是這裡有一個問題

ajax請求能寫在willmount裡嗎？
：答案是不推薦，別這麼寫

1.雖然有些情況下並不會出錯，但是如果ajax請求過來的資料是空，那麼會影響頁面的渲染，可能看到的就是空白。
2.不利於服務端渲染，在同構的情況下，生命週期會到componentwillmount，這樣使用ajax就會出錯

3、componentDidMount 組件渲染完成

組件第一次渲染完成，此時dom節點已經產生，可以在這裡調用ajax請求，返回資料setState後組件會重新渲染

4.componentWillReceiveProps (nextProps)

componentWillReceiveProps在接受父組件改變後的props需要重新渲染組件時用到的比較多
它接受一個參數

1.nextProps
通過對比nextProps和this.props，將nextProps setState為當前組件的state，從而重新渲染組件

componentWillReceiveProps (nextProps) {    nextProps.openNotice !== this.props.openNotice && this.setState({        openNotice:nextProps.openNotice    }，() => {      console.log(this.state.openNotice:nextProps) //將state更新為nextProps,在setState的第二個參數（回調）可以列印出新的state  })}

關於setState的用法及深入瞭解 後面會專門整理一篇文章5.shouldComponentUpdate(nextProps,nextState)

唯一用於控制組件重新渲染的生命週期，由於在react中，setState以後，state發生變化，組件會進入重新渲染的流程，（暫時這麼理解，其實setState以後有些情況並不會重新渲染，比如數組引用不變）在這裡return false可以阻止組件的更新

因為react父組件的重新渲染會導致其所有子組件的重新渲染，這個時候其實我們是不需要所有子組件都跟著重新渲染的，因此需要在子組件的該生命週期中做判斷

對於react初學者，可能涉及這個生命週期的機會比較少，但是如果你的項目開始注重效能最佳化，隨著你對react的喜愛和深入，你就會用到這個生命週期

6.componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以後，組件進入重新渲染的流程，進入componentWillUpdate,這裡同樣可以拿到nextProps和nextState

7.render函數

render函數會插入jsx產生的dom結構，react會產生一份虛擬dom樹，在每一次組件更新時，在此react會通過其diff演算法比較更新前後的新舊DOM樹，比較以後，找到最小的有差異的DOM節點，並重新渲染

react16中 render函數允許返回一個數組，單個字串等，不在只限制為一個頂級DOM節點，可以減少很多不必要的div(當然注意升級你的react版本，將現有項目升到react16並不會出現什麼bug，唯一注意的是proTypes類型檢測換了名字~)

意思你現在可以這樣：

render () {  return " "

}
或者這樣：

render () {  return [                <div></div>             <div></div>

]
}

8、componentDidUpdate(prevProps,prevState)

組件更新完畢後，react只會在第一次初始化成功會進入componentDidmount,之後每次重新渲染後都會進入這個生命週期，這裡可以拿到prevProps和prevState，即更新前的props和state。
如果你理解了組件一次重新渲染的過程，那麼你應該理解下面5處列印出來的state應該是相同的。（關於setState非同步是同步的理解，後面也會整理一篇文章~）

componentWillReceiveProps (nextProps,nextState) {    this.setState({        fengfeng:nextProps.fengfeng    },()=>{        console.log(this.state.fengfeng) //1    })    }shouldComponentUpdate (nextProps,nextState) {    console.log(nextState.fengfeng)  //2}componentWillUpdate (nextProps,nextState) {    console.log(nextState.fengfeng)  //3}componentDidUpdate (prevProps,prevState) {    console.log(this.state.fengfeng) //5}render () {    console.log(this.state.fengfeng) //4    return (        <div></div>    )}

9、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}

拓展：

1.react生命週期父子組件渲染順序
父子組件， componentWillMount生命週期是先進入父組件還是子組件？
componentDidMount呢？

Evan_zhan
連結：https://www.jianshu.com/p/c9bc994933d5
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

react 生命週期