反应生命周期方法.应用何时呈现到屏幕?

Question

我已经阅读了许多关于 React 生命周期方法的文章，但我似乎无法得到我正在努力解决的问题的答案。

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

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

根看起来像：

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

应用程序内部有几个组件。

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

1. 构成部分1(子女至2)
2. 组件 2(子项到 APP)
3. 应用程序(浏览器路由器的子级)
4. 浏览器路由器(ApolloProvider的子级)
5. 阿波罗提供者(子到根)

我的问题是，例如，一旦组件 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 更新发生后才会调用。

另请参阅 https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e，它看起来像是对 React 中更新如何工作的深入解释。