fat-cat

渲染和提交

渲染

组件显示到屏幕之前，其必须被 React 渲染

想象一下，你的组件是厨房里的厨师，把食材烹制成美味的菜肴。在这种场景下，React 就是一名服务员，他会帮客户们下单并为他们送来所点的菜品。这种请求和提供 UI 的过程总共包括三个步骤：

• 触发 一次渲染（把客人的点单分发到厨房）
• 渲染 组件（在厨房准备订单）
• 提交 到 DOM（将菜品放在桌子上）

步骤 1：触发一次渲染

有两种原因会导致组件的渲染:

• 组件的 初次渲染。
• 组件（或者其祖先之一）的 状态发生了改变。

步骤 2：React 渲染你的组件

在你触发渲染后，React 会调用你的组件来确定要在屏幕上显示的内容。“渲染中” 即 React 在调用你的组件（创建 DOM 节点）。

• 在进行初次渲染时, React 会调用根组件。
• 对于后续的渲染, React 会调用内部状态更新触发了渲染的函数组件

步骤 3: React 把更改提交到 DOM 上

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

• 对于初次渲染， React 会使用 appendChild() DOM API 将其创建的所有 DOM 节点放在屏幕上。
• 对于重渲染， React 将应用最少的必要操作（在渲染时计算！），以使得 DOM 与最新的渲染输出相互匹配。

重新渲染

当 React 重新渲染一个组件时：

• React 会再次调用你的函数
• 函数会返回新的 JSX 快照
• React 会更新界面以匹配返回的快照