反应生命周期方法。应用何时呈现在屏幕上？

Question

我读过很多关于React生命周期方法的文章，我似乎无法得到一个我正在努力解决的问题的答案。

我有一个相对简单的应用程序，我写的渲染：

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

Root看起来像：

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

应用程序里面有一些组件。

我在每个组件console.logs方法中放置了componentDidMount，它们记录的顺序如下：

我的问题是，一旦组件2已经渲染并且componentDidMount被执行，这是否意味着组件在屏幕上可见或者所有组件必须首先安装到虚拟DOM，然后才更新实际的浏览器DOM？

React应用程序何时实际更新浏览器DOM？

Answer 1

经过一些阅读和研究，我认为下面的例子可能会给你一些启示：

想象一下，我有3个组件：A, B, C，这样：

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

现在，渲染，DOM更新（绘画）和生命周期Did方法执行的顺序是：

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

render()函数返回一个新元素，这是对帐进程的输入，它负责DOM更新。如果组件有子项，则调用子项的render方法，并且只有在树中的最后一个子项之后才会进行浏览器绘制。

我的问题是，一旦组件2已经渲染并且componentDidMount被执行，这是否意味着该组件在屏幕上可见或....

是的，我想这么想。 componentDidMount和componentDidUpdate只有在实际的DOM更新发生后才被调用，always。