生命周期問題
父組件掛載三次子組件:生命周期函數(shù)執(zhí)行流程真實(shí)的是這樣的(對(duì)比標(biāo)箭頭的地方)
? ? super constructor
? ? super componentWillMount
? ? super render
? ? ? ? ->child componentWillMount
? ? ? ? ->child render
? ? ? ? ->child componentWillMount
? ? ? ? ->child render
? ? ? ? ->child componentWillMount
? ? ? ? ->child render
? ? ? ? ->child componentDidMount
? ? ? ? ->child componentDidMount
? ? ? ? ->child componentDidMount
? ? super componentDidMount
為什么不是這樣的?
? ? super constructor
? ? super componentWillMount
? ? super render
? ? ? ? ->child componentWillMount
? ? ? ? ->child render
? ? ? ? ->child componentDidMount
? ? ? ? ->child componentWillMount
? ? ? ? ->child render
? ? ? ? ->child componentWillMount
? ? ? ? ->child render
? ? ? ? ->child componentDidMount
? ? super componentDidMount
2018-12-14
componentWillMount?在渲染前調(diào)用,在客戶端也在服務(wù)端。
componentDidMount?: 在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對(duì)應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode()來進(jìn)行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個(gè)方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請(qǐng)求等操作(防止異步操作阻塞UI)。
componentWillReceiveProps?在組件接收到一個(gè)新的 prop (更新后)時(shí)被調(diào)用。這個(gè)方法在初始化render時(shí)不會(huì)被調(diào)用。
shouldComponentUpdate?返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)被調(diào)用。在初始化時(shí)或者使用forceUpdate時(shí)不被調(diào)用。?
可以在你確認(rèn)不需要更新組件時(shí)使用。
componentWillUpdate在組件接收到新的props或者state但還沒有render時(shí)被調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。
componentDidUpdate?在組件完成更新后立即調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。
componentWillUnmount在組件從 DOM 中移除之前立刻被調(diào)用。