reactソースを読む--記録:1.1問題記録

1452 ワード

コンポーネントのライフサイクルとレンダリング順序
コードアドレスreactit 15.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では、最下位のサブコンポーネントがマウントおよび更新を最初に完了します.
コンストラクタ()コンストラクタ、componentWillMount実行順序:
最上位の親コンポーネント--子コンポーネント--子コンポーネント--ボトムサブアセンブリ
render、componentDidMount順序:
下部サブアセンブリ--サブアセンブリ--サブアセンブリ--サブアセンブリ--最上位の親コンポーネント
update phases同理