渲染与绘画

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

02-state

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

blender-ss

在 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 节点（大量绘制），而是找出快照之间的变化，并以精确的方式进行必要的调整。

额外资源

官方的 React 文档在他们的新文章《Render and Commit》中深入探讨了这个主题。

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 }); });