一 组件生命周期及渲染顺序
代码地址
react15.6-dev
react/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js
line 88-113
/**
* ------------------ The Life-Cycle of a Composite Component ------------------
*
* - constructor: Initialization of state. The instance is now retained.
* - componentWillMount
* - render
* - [children's constructors] // 子组件constructor()
* - [children's componentWillMount and render] // 子组件willmount render
* - [children's componentDidMount] // 子组件先于父组件完成挂载didmount
* - componentDidMount
*
* Update Phases:
* - componentWillReceiveProps (only called if parent updated)
* - shouldComponentUpdate
* - componentWillUpdate
* - render
* - [children's constructors or receive props phases]
* - componentDidUpdate
*
* - componentWillUnmount
* - [children's componentWillUnmount]
* - [children destroyed]
* - (destroyed): The instance is now blank, released by React and ready for GC.
*
* -----------------------------------------------------------------------------
*/
所以在react的组件挂载及render过程中,最底层的子组件是最先完成挂载及更新的。
constructor()构造函数、componentWillMount执行顺序:
顶层父组件--子组件--子组件--...--底层子组件
render、componentDidMount顺序:
底层子组件--子组件--子组件--...--顶层父组件
update phases同理