渲染和提交

Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.

You will learn

• What rendering means in React（在 React 中，”渲染”是什么意思）
• When and why React renders a component（为什么以及什么时候 React 会渲染一个组件）
• The steps involved in displaying a component on screen（在屏幕上显示组件所包含的步骤）
• Why rendering does not always produce a DOM update（为什么渲染并不一定会导致 DOM 更新）

Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients（想象一下你的组件是厨房里的厨师，把食材烹制成美味的菜肴。）.
In this scenario, React is the waiter who puts in requests from customers and brings them their orders（React 就是一名服务员，他会帮客户们下单并为他们送来所点的菜品。）. This process of requesting and serving UI has three steps:

1. Triggering a render (delivering the guest’s order to the kitchen)【触发 一次渲染（把客人的点单分发到厨房）】
2. Rendering the component (preparing the order in the kitchen)【渲染 组件（在厨房准备订单）】
3. Committing to the DOM (placing the order on the table)【提交 到 DOM（将菜品放在桌子上）】

assemble /əˈsembl/ 集合，聚集；装配； ingredient /ɪnˈɡriːdiənt/ (混合物的)组成部分; 配料；scenario /səˈnærioʊ/ 情节；剧本；方案；

Step 1: Trigger a render （触发一次渲染）

There are two reasons for a component to render（有两种原因会导致组件的渲染）:

1. It’s the component’s initial render. （初次渲染）
2. The component’s (or one of its ancestors’) state has been updated.（组件或其祖先的state发生了改变）

Initial render 

When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it’s done by calling createRoot with the target DOM node, and then calling its render method with your component（然后用你的组件调用 render 函数完成的）:

Try commenting out the root.render() call and see the component disappear!

Re-renders when state updates （状态更新时重新渲染）

Once the component has been initially rendered, you can trigger further renders by updating its state with the set function. （一旦组件被初次渲染，你就可以通过使用 set 函数 更新其状态来触发之后的渲染。）
Updating your component’s state automatically queues a render（更新组件的状态会自动将一次渲染送入队列。==》送入队列，并不代表立马渲染！！）. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)

Step 2: React renders your components （React 渲染你的组件）

After you trigger a render, React calls your components to figure out what to display on screen. （在你触发渲染后，React 会调用你的组件来确定要在屏幕上显示的内容。）“Rendering” is React calling your components.

• On initial render, React will call the root component.（在进行初次渲染时, React 会调用根组件。）
• For subsequent renders, React will call the function component whose state update triggered the render.（对于后续的渲染, React 会调用内部状态更新触发了渲染的函数组件。）

This process is recursive: if the updated component returns some other component, React will render that component next, and if that component also returns something, it will render that component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.（这个过程是递归的：如果更新后的组件会返回某个另外的组件，那么 React 接下来就会渲染 那个 组件，还是看下面的例子理解吧）

In the following example, React will call Gallery() and Image() several times:

• During the initial render, React will create the DOM nodes for <section>, <h1>, and three <img> tags.（初次渲染时，React 会为 <section>, <h1>, and three <img> tags 创建 DOM 节点）
• During a re-render, React will calculate which of their properties, if any, have changed since the previous render. It won’t do anything with that information until the next step, the commit phase.（在重新渲染时，React 会计算自上次渲染之后，哪些属性有变化，在下一步提交前，不会对这些信息进行任何操作）

Pitfall

Rendering must always be a pure calculation:

• Same inputs, same output. Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
• It minds its own business. It should not change any objects or variables that existed before rendering. (One order should not change anyone else’s order.)

Otherwise（否则）, you can encounter（遇到） confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in “Strict Mode”, React calls each component’s function twice, which can help surface mistakes caused by impure functions.

Optimizing performance（性能优化）

The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the Performance section. Don’t optimize prematurely（不要过早优化）!

Step 3: React commits changes to the DOM （React 把更改提交到 DOM 上）

After rendering (calling) your components, React will modify the DOM（在渲染（调用）你的组件之后，React 将会修改 DOM）.

• For the initial render, React will use the appendChild() DOM API to put all the DOM nodes it has created on screen.
• For re-renders, React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.（对于 re-renders， React 将应用最少的必要操作（在渲染时计算！），以使得 DOM 与最新的渲染输出相互匹配。）

React only changes the DOM nodes if there’s a difference between renders.（React 仅在渲染之间存在差异时才会更改 DOM 节点）
For example, here is a component that re-renders with different props passed from its parent every second（每秒）. Notice how you can add some text into the <input>, updating its value, but the text doesn’t disappear when the component re-renders【我理解是因为往里面输入值并没有触发重新渲染~~】:

This works because during this last step, React only updates the content of <h1> with the new time. It sees that the <input> appears in the JSX in the same place as last time, so React doesn’t touch the <input>—or its value!

Epilogue: Browser paint （尾声：浏览器绘制 ）

After rendering is done and React updated the DOM, the browser will repaint the screen. （在渲染完成并且 React 更新 DOM 之后，浏览器就会重新绘制屏幕。）
Although this process is known as “browser rendering”, we’ll refer to it as “painting” to avoid confusion throughout the docs.

Recap

• Any screen update in a React app happens in three steps:
  1. Trigger
  2. Render
  3. Commit
• You can use Strict Mode to find mistakes in your components
• React does not touch the DOM if the rendering result is the same as last time

• 在一个 React 应用中，一次屏幕更新都会发生以下三个步骤：
  1. 触发
  2. 渲染
  3. 提交
• 你可以使用严格模式去找到组件中的错误
• 如果渲染结果与上次一样，那么 React 将不会修改 DOM

参：https://zh-hans.react.dev/learn/render-and-commit