從印度回來后學(xué)了 React 那么久竭业，居然從來沒有仔細(xì)去看過 React 的生命周期脂崔。還是今天被問到的時(shí)候，才知道了赏半。
猶記得有那么一段時(shí)間梅忌，手機(jī)的鎖屏還是
當(dāng)年的手機(jī)鎖屏.png
然而今天并沒有完整的說出這所有的過程（按照順序），分分鐘打臉了除破。
事實(shí)上，React 的生命周期主要分為三個(gè)過程：裝載過程琼腔，更新過程瑰枫，以及卸載過程。
裝載過程
把組件第一次在 DOM 樹種渲染的過程
image.png
- getDefaultProps()
用來設(shè)置組件屬性的默認(rèn)值丹莲，在組件被建立時(shí)就會(huì)立即調(diào)用光坝，所有實(shí)例都可以共享這些屬性。 - getInitialState()
用于定義初始狀態(tài)甥材。 - componentWillMount()
只在初始化時(shí)候被調(diào)用一次盯另，可以使用setState方法，會(huì)立即更新state洲赵，然后會(huì)進(jìn)行render鸳惯。 - render()
在render中使用setState方法會(huì)報(bào)錯(cuò)。若其中包含其他的子組件叠萍，那么子組件的生命周期才開始進(jìn)行 - componentDidMount()
在子組件也都加載完畢后執(zhí)行芝发，DOM 渲染完成，此時(shí)就可以操作 DOM 了苛谷。但是由于 React 中的 DOM 是虛擬 DOM辅鲸，因此不推薦操作 DOM。
更新過程
組件被重新渲染的過程
更新過程分為 props 發(fā)生改變和 state 發(fā)生改變
- props 發(fā)生改變
- componentWillReceiveProps(nextProps)
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- render()
- componentDidUpdate(prevProps, prevState)
- state 發(fā)生改變
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- render()
- componentDidUpdate(prevProps, prevState)
其中腹殿，
- shouldComponentUpdate(nextProps, nextState)
該方法決定了一個(gè)組件什么時(shí)候不需要渲染独悴，返回一個(gè)布爾值。告訴 React 這個(gè)組件在這次更新過程中是否要繼續(xù)锣尉。
shouldComponentUpdate(nextProps, nextState)
通常在該方法中比較當(dāng)前的 state刻炒，props 和 nextState，nextProps 來進(jìn)行比較自沧。返回 true 或 false 來渲染組件落蝙，優(yōu)化性能。
componentWillUpdate(nextProps, nextState)
在 state 改變或 shouldComponentUpdate 返回 true 后出發(fā)componentDidUpdate(prevProps, prevState)
會(huì)等子組件也都更新完后才觸發(fā)
卸載過程
組件從 DOM 中刪除的過程
image.png
- componentWillUnmount()
該方法與componentDidMount有關(guān)暂幼，例如：在componentDidMount中用非 React 的方法創(chuàng)造一些DOM元素筏勒，如果不管可能會(huì)造成內(nèi)存泄漏，因此需要componentWillUnmount中把這些創(chuàng)造的DOM元素清理掉旺嬉。
注意
不要在 shouldCompoentUpdate管行、componentWillUpdate、componentDidUpdate邪媳，以及 render 中使用 setState捐顷。
The End ~
21 天寫作訓(xùn)練荡陷，第 8 天 ing
