Question

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

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

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

Root看起来像：

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

App里面有一些组件。

我已在每个组件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已执行，这是否意味着该组件在屏幕上可见或....

是，我想这么想。只有在实际进行DOM更新always后才会调用componentDidMount和componentDidUpdate。