渲染和提交
请求和提供UI的过程总共包括三个步骤：
- 触发一次渲染(把客人的点单分发到厨房)。
- 渲染组件(在厨房准备订单)。
- 提交到DOM(把菜品放在桌子上)。
1. 触发一次渲染
两种原因会导致组件的渲染：
- 组件的初次渲染。
- 组件(或其祖先之一)的状态发生了改变。
初次渲染
通过调用目标DOM节点的createRoot，然后用组件调用render函数完成。
状态更新时重新渲染
一旦组件被初次渲染，可以通过使用set函数更新其状态来触发之后的渲染。更新组件的状态会自动将一次渲染送入队列。更新组件状态会自动将一次渲染送入队列。
2. React渲染组件
触发渲染之后，React会调用组件来确定要在屏幕上显示的内容。渲染中即React在调用组件：
- 在进行初次渲染时， React会调用根组件。
- 对于后续的渲染， React会调用内部状态更新触发了渲染的函数组件。
注意： 渲染必须始终是一次纯计算：
- 输入相同，输出相同。 给定相同的输入，组件应始终返回相同的 JSX。（当有人点了西红柿沙拉时，他们不应该收到洋葱沙拉！）
- 只做它自己的事情。 它不应更改任何存在于渲染之前的对象或变量。（一个订单不应更改其他任何人的订单。）
3.React把更改提交到DOM上
在渲染组件之后，React将会修改DOM。
- 对于初次渲染， React 会使用
appendChild()DOM API 将其创建的所有 DOM 节点放在屏幕上 - 对于重渲染， React 将应用最少的必要操作（在渲染时计算！），以使得 DOM 与最新的渲染输出相互匹配。
React 仅在渲染之间存在差异时才会更改 DOM 节点。
