阅读react源码--记录：1.1 问题记录

一 组件生命周期及渲染顺序

代码地址
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同理