ライフサイクルのライフサイクルの手法。アプリはいつスクリーンにレンダリングされますか？

Question

私はReactのライフサイクルメソッドに関する多数の記事を読んできました。私は苦労している質問に答えられないようです。アプリケーションはその内部のいくつかのコンポーネントがあり

<ApolloProvider client={client}> 
    <BrowserRouter> 
    <App /> 
    </BrowserRouter> 
</ApolloProvider> 

：

私はレンダリング私が書いた、比較的シンプルなアプリがありますように

ReactDOM.render(<Root />, document.getElementById('Root')) 

ルートが見えます。

Iは、各コンポーネント内componentDidMount方法をconsole.logsを配置しており、次のようにそれらがログ順序である：

1. 成分1（2子）
2. 成分2（APPの子）
3. アプリ（ BrowserRouterの子）
4. BrowserRouter（ApolloProviderに子）ルートへ
5. ApolloProvider（子供）

私の質問は、たとえばコンポーネント2がレンダリングされ、componentDidMountが実行されると、実際のブラウザDOMが更新される前にコンポーネントが画面に表示されるか、すべてのコンポーネントが最初に仮想DOMにマウントされなければならないということです？

Reactアプリケーションは実際にブラウザDOMをいつ更新しますか？

Answer 1

いくつかの読書と研究の後、私は次の例では、あなたにいくつかの光を与えるかもしれないと思う：A, B, C、よう：

今

<A> 
<B> 
    <C/> 
</B> 
</A> 

、順序

は、私は3つのコンポーネントを持っている想像してみて実行されますレンダリング、DOMのupdation（絵）とライフサイクルDid方法は以下のとおりです。

A.render() -> B.render() -> C.render() -> Reconciliation and DOM update -> C.componentDidMount() -> B.componentDidMount() -> A.componentDidMount() 

render()関数は新しい要素を返し、これはDOMの更新を担当する調整プロセスに入力されます。コンポーネントに子がある場合、子のrenderメソッドが呼び出され、ツリー内の最後の子がブラウザペインティングを実行した後でのみ発生します。

私の質問例えば成分2をレンダリングし、componentDidMountが行われると、そのコンポーネントが画面上に表示されているか、意味されている....

はい、I」はそう思うのが好きです。 componentDidMountとcomponentDidUpdateは、実際のDOMの更新が行われた後にのみ呼び出されます。always

また、Reactの更新がどのように機能するかについての詳細な説明のように見えるhttps://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84eも参照してください。