渲染与绘画
渲染与绘画
在本课程中,每个模块都以自定义的 3D 插图开始。你可能还记得在本模块的初始课程中看到过这台复杂的机器。
我使用名为 Blender 的 3D 建模软件创建这些插图:
在 Blender 中,我可以渲染我的项目以创建最终图像:
(此录音速度加快了 150 倍,实际上并没有那么快!)
“渲染”一词通常指的是这类事情:我们正在处理某种未处理的原始输入,并生成最终的可用输出。
即使在Web框架中,这一定义也相当一致。例如,在 Express 中,请求在我们渲染 HTML 模板时结束:
然而,在 React 中,“render”一词的含义略有不同。我认为 React 中的许多混淆源于这种误解。
让我们看一个例子。假设我有以下组件:
我们的 AgeLimit 组件检查一个 age 属性并返回两个段落中的一个。
现在,假设我们重新渲染这个组件,最终得到以下前后快照对:
在这两种情况下, 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》中深入探讨了这个主题。