跳到主要内容

渲染和提交

在组件显示在屏幕上之前,它们必须经过React的渲染过程。了解这个过程中的各个步骤将有助于您思考代码的执行方式,并解释其行为。

React将组件的渲染过程分为三个阶段:

  1. 触发渲染 - 当组件的状态发生变化时,会触发渲染。
  2. 渲染组件 - React调用组件函数,计算出新的UI描述。
  3. 提交到DOM - React将计算出的变更应用到DOM上。

理解这个过程可以帮助您:

  • 优化性能,避免不必要的渲染
  • 正确处理副作用和DOM操作的时机
  • 理解React的工作原理,更好地调试问题

接下来我们将详细介绍这三个阶段,以及它们是如何协同工作的。

第一步：触发渲染​

有两种方式触发渲染：

  1. 初始化渲染
  2. 状态更新

初始化渲染​

当React应用启动时,会进行初始化渲染。React会调用根组件的render方法,并递归地调用子组件的render方法,直到整个组件树都被渲染。

状态更新​

当组件的状态发生变化时,会触发渲染。例如,当调用setState时,React会知道组件的状态发生了变化,并开始准备渲染。

第二步：渲染组件​

触发渲染后，React 会调用组件来确定屏幕上应该显示什么内容。"渲染"指的是 React 调用组件。

  • 在初始渲染时，React 会调用根组件。
  • 对于后续的渲染，React 会调用状态更新触发渲染的函数组件。

这个过程是递归的：如果更新的组件返回了其他组件，React 会继续渲染那个组件；如果那个组件也返回了其他内容，React 会继续渲染下一个组件，以此类推。这个过程会一直持续，直到没有更多嵌套的组件，React 就能准确地知道屏幕上应该显示什么内容。

第三步：提交到DOM​

在渲染（调用）组件之后，React 会修改 DOM。

  • 对于初始渲染，React 会使用 appendChild() DOM API 将所有创建的 DOM 节点放置到屏幕上。
  • 对于重新渲染，React 会应用最小必要的操作（在渲染过程中计算得出）来使 DOM 与最新的渲染输出相匹配。

React 只在渲染之间存在差异时才会更改 DOM 节点。

这种方式可以显著提高性能，因为它最大限度地减少了对 DOM 的操作，而 DOM 操作通常是 Web 应用程序中最耗时的部分。

回顾​

  1. 触发渲染 - 初始化或状态更新时启动渲染过程
  2. 渲染组件 - React 调用组件函数，计算新的 UI 结构
  3. 提交到 DOM - React 将变更高效地应用到浏览器 DOM 渲染