为什么以及什么时候 React 会渲染一个组件

　　组件显示到屏幕之前，其必须被 React 渲染。 在您触发渲染后，React 会调用您的组件来确定要在屏幕上显示的内容。“渲染中” 即 React 在调用您的组件。 在进行初次渲染时, React 会调用根组件。 对于后续的渲染, React 会调用内部状态更新触发了渲染的函数组件。 这个过程是递归的：如果更新后的组件会返回某个另外的组件，那么 React 接下来就会渲染 那个 组件，而如果那个组件又返回了某个组件，那么 React 接下来就会渲染 那个 组件，以此类推。这个过程会持续下去，直到没有更多的嵌套组件并且 React 确切知道哪些东西应该显示到屏幕上为止。

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

1.组件的 初次渲染

2.组件（或者其祖先之一）的 状态发生了改变。

1.1初次渲染 当应用启动时，会触发初次渲染。框架和沙箱有时会隐藏这部分代码，但它是通过调用目标 DOM 节点的 createRoot，然后用你的组件调用 render 函数完成的。 状态更新时重新渲染

2.1一旦组件被初次渲染，您就可以通过使用 set 函数 更新其状态来触发之后的渲染。更新组件的状态会自动将一次渲染送入队列。（您可以想象这种情况成餐厅客人在第一次下单之后又点了茶、点心和各种东西，具体取决于他们的胃口。）

在屏幕上显示组件所涉及的步骤

步骤 1: 触发一次渲染

步骤 2: React 渲染您的组件

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

为什么渲染并不一定会导致 DOM 更新

对于初次渲染， React 会使用 appendChild() DOM API 将其创建的所有 DOM 节点放在屏幕上。 对于重渲染， React 将应用最少的必要操作（在渲染时计算！），以使得 DOM 与最新的渲染输出相互匹配。 React 仅在渲染之间存在差异时才会更改 DOM 节点。 例如，有一个组件，它每秒使用从父组件传递下来的不同属性重新渲染一次。注意，您可以添加一些文本到 input标签，更新它的 value，但是文本不会在组件重渲染时消失