渲染与绘画

在本课程中，每个模块都以自定义的 3D 插图开始。你可能还记得在本模块的初始课程中看到过这台复杂的机器。

我使用名为 Blender 的 3D 建模软件创建这些插图：

在 Blender 中，我可以渲染我的项目以创建最终图像：

（此录音速度加快了 150 倍，实际上并没有那么快！）

“渲染”一词通常指的是这类事情：我们正在处理某种未处理的原始输入，并生成最终的可用输出。

即使在Web框架中，这一定义也相当一致。例如，在 Express 中，请求在我们渲染 HTML 模板时结束：

app.get("/user/profile", (req, res) => {
  const user = database.get(req.query.userId);
  // Generate the final HTML file and send it to the client:
  return res.render("profile", { name: user.name });
});

然而，在 React 中，“render”一词的含义略有不同。我认为 React 中的许多混淆源于这种误解。

让我们看一个例子。假设我有以下组件：

function AgeLimit({ age }) {
  if (age < 18) {
    return <p>You're not old enough!</p>;
  }
 
  return <p>Hello, adult!</p>;
}

我们的 AgeLimit 组件检查一个 age 属性并返回两个段落中的一个。

现在，假设我们重新渲染这个组件，最终得到以下前后快照对：

age: 16
 
{
  type: 'p',
  key: null,
  ref: null,
  props: {},
  children: "You're not old enough!",
}

在这两种情况下， age 小于 18，因此我们最终得到了完全相同的用户界面。因此，根本没有发生 DOM 变更。

所以，当我们谈论“重新渲染”一个组件时，并不一定意味着 DOM 中会发生任何变化！我们是说 React 将检查是否有任何变化。如果 React 发现快照之间有差异，它将需要更新 DOM，但这将是一个精确定位的最小变化。

当 React 更改 DOM 的一部分时，浏览器需要重新绘制。重新绘制是指由于 DOM 的某个部分被更改，屏幕上的像素被重新绘制。这是浏览器在使用 JavaScript（无论是通过 React、Angular、jQuery、原生 JS 还是其他方式）编辑 DOM 时本地完成的。

总结：

• 重新渲染是一个 React 过程，它确定需要更改的内容（即“协调”，找不同的游戏）。
• 如果两个快照之间发生了变化，React 将通过编辑 DOM 来“提交”这些变化，以使其与最新的快照匹配。
• 每当编辑一个 DOM 节点时，浏览器会重新绘制，重新绘制相关的像素，以便用户看到正确的用户界面。
• 并非所有的重新渲染都需要重新绘制！如果快照之间没有任何变化，React 将不会编辑任何 DOM 节点，也不会进行重新绘制。

关键要理解的是，当我们谈论“重新渲染”时，并不是说我们应该丢弃当前的用户界面并从头开始重建一切。

React 尝试将重绘保持在最低限度，因为重绘是缓慢的。它不是从头生成一堆新的 DOM 节点（大量绘制），而是找出快照之间的变化，并以精确的方式进行必要的调整。