項(xiàng)目地址：https://github.com/wangxiaofeid/react-lifecycle
測(cè)試
首次渲染
father constructor
father getDerivedStateFromProps
father render
children constructor
children getDerivedStateFromProps
children render
children componentDidMount
father componentDidMount
父組件數(shù)據(jù)修改觸發(fā)重渲染
father getDerivedStateFromProps
father shouldComponentUpdate
father render
children getDerivedStateFromProps
children shouldComponentUpdate
children render
children getSnapshotBeforeUpdate
father getSnapshotBeforeUpdate
children componentDidUpdate, snapshot: 1
father componentDidUpdate, snapshot: 1
父組件調(diào)用forceUpdate
father getDerivedStateFromProps
father render
children getDerivedStateFromProps
children shouldComponentUpdate
children render
children getSnapshotBeforeUpdate
father getSnapshotBeforeUpdate
children componentDidUpdate, snapshot: 1
father componentDidUpdate, snapshot: 1
銷毀
father componentWillUnmount
children componentWillUnmount
總結(jié)
舊生命周期在各個(gè)階段的調(diào)用情況
- 掛載
- constructor
- componentWillMount
- render
- componentDidMount
- 更新
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
- 卸載
- componentWillUnmount
新生命周期在各個(gè)階段的調(diào)用情況
- 掛載
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
- 更新
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
- 卸載
- componentWillUnmount
父子組件之間的生命周期函數(shù)的調(diào)用順序
- 掛載階段笨使，只有當(dāng)執(zhí)行到render的時(shí)候抖苦，父組件的constructor才開(kāi)始執(zhí)行苗缩，知道子組件掛載完成（componentDidMount），父組件才算掛載完成
- 更新階段弄兜，類似掛載階段，只有父組件執(zhí)行到render，才開(kāi)始子組件的getDerivedStateFromProps -> shouldComponentUpdate -> render猜年，但再父組件的getSnapshotBeforeUpdate是緊隨在子組件的getSnapshotBeforeUpdate后，然后子組件在componentDidUpdate
父組件調(diào)用forceUpdate
組件調(diào)用forceUpdate方法后疾忍，不會(huì)執(zhí)行shouldComponentUpdate乔外，會(huì)執(zhí)行g(shù)etDerivedStateFromProps，然后再render一罩，后面的生命周期和更新一致
