React + TypeScript: 渲染和提交
React公式网站的文档已于2023年3月16日进行了修改（请参阅「Introducing react.dev」）。本文简要总结了基础解释中的「Render and Commit」，并加入了TypeScript代码。同时，省略了面向初学者的JavaScript基础解说。
另外，请参考其他本系列解说文章，标题为《React + TypeScript: 学习React官方文档的基本解释“Learn React”》。
在React将组件显示在屏幕上之前，它必须先进行渲染。假设组件就像餐厅的厨师，那么React就扮演着根据客户的订单将菜品送到客人手中的服务员的角色。
-
- 启动渲染：将顾客的订单送到厨房。
-
- 进行组件渲染：在厨房内准备食物的工作。
- 提交到DOM：将食物送到顾客的餐桌上。
让我们按顺序依次观察三个阶段。
打开渲染器。
必须启动渲染的情况有两种。
-
- コンポーネントの初期レンダー。
- コンポーネント(あるいは親)の状態の更新による再レンダー。
最初的渲染 (chū qī
当应用程序启动时，必须启动初始渲染。在框架和沙盒中，启动代码可能被隐藏。尽管如此，仍然会调用createRoot方法并通过render方法对目标DOM节点进行初始渲染。
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement!);
root.render(
<StrictMode>
<App />
</StrictMode>
);
通过状态更新进行重新渲染
在组件的初始渲染完成后，进一步引起渲染的是通过设置状态的函数更新。当组件的状态更新时，自动将渲染加入队列中（就像在餐厅中新增订单一样）。
渲染组件
当渲染开始时，React通过调用组件来决定在屏幕上显示什么。 “渲染”是指React调用组件。
在React中，可以这样调用组件。
初期: ルートコンポーネントを呼び出す。
次回以降: 状態の更新が実行された関数コンポーネントを呼び出す。
组件渲染是递归的。如果更新的组件返回另一个组件，React将继续进行渲染。如果有返回值，它将添加到渲染中。递归渲染将持续进行，直到嵌套的组件消失。这样，React就可以准确地知道应该显示什么在屏幕上。
React渲染如下：
初期: 戻り値のJSXにしたがってつくるのがDOMノードです。
次回以降: 前回のレンダリングから 変更されたプロパティがあれば計算します。ただし、つぎのコミットの段階までは、その情報を使って何もしません。
渲染始终是纯粹的计算。
入力が同じなら出力も同じでなければなりません。 同じ入力が与えられれば、コンポーネントはつねに同じJSXを返すのです。
コンポーネントはそのコンポーネントの処理のみ行います。レンダリング前にあったオブジェクトや変数を変更してはいけません。
如果不这样做，随着代码变得复杂，你将会被难懂的错误和意外的行为困扰。通过使用StrictMode进行开发，React会调用组件函数两次。这是为了揭示由于函数不纯而引起的问题（请参考 “React + TypeScript: React 18中组件挂载时useEffect会被执行两次”）。
提交更改到DOM
组件渲染(调用)完成后，React会修改DOM。
一旦组件渲染完毕，React就会修改DOM。
初期: ReactはDOM APIのappendChild()により、すべてのDOMノードを画面に配置するのです。
次回以降: Reactは最小限の操作(計算はレンダリング中)のみ加えて、DOMを最新のレンダリング出力に合わせます。
React变化的只是在渲染期间发生变化的DOM节点。在相同的JSX中，与之前渲染不变的节点没有接触。
当渲染完成后，React会更新DOM。然后，浏览器会重新绘制屏幕（repaint）。一般来说，这被称为”浏览器渲染”。然而，为了区别于React的渲染，请通过文档将其称为”描绘(repaint)”。
总结
在这篇文章中，我们详细介绍了以下内容。
-
- Reactアプリケーションが画面を更新する手順はつぎの3段階です。
レンダーの起動。
レンダリング。
DOMへのコミット。
StrictModeを使うと、関数が純粋でないことによる問題が確かめられます。
Reactは、レンダリングの結果が前と変わらなければ、DOMには触れません。
