调用渲染vs绘制DOM？

Question

我正在学习React，并试图更好地了解生命周期和不同阶段。

我刚刚读到的一件事是“React首先呈现然后安装元素。在此上下文中进行渲染意味着调用类的render（），而不是绘制DOM“

我想我只是不明白这意味着什么。有人可以用简单的方式或用例子解释它吗？

提前致谢！

Answer 1

一些简化的定义首先：

1. 浏览器使用dom来决定要显示的内容。在反应中，这被称为绘画，因为无论什么东西被添加到dom，浏览器都必须重新绘制屏幕。
2. dom操纵是昂贵的。无论是时间还是资源
3. 反应看起来如此之快的原因之一是它使用人们称之为virtual dom的东西。虚拟dom尝试镜像实际的dom，它们可能暂时不同步，因为对虚拟dom的所有更改都不会立即反映在实际的dom上（否则拥有虚拟dom的好处是什么？）

考虑到这些定义，让我们看一下React的作用：

1. 当反应将触发render方法来填充其虚拟dom
2. 它将继续对虚拟dom的更改进行批处理，一旦确定更改屏幕的好时间，它将仅刷新对dom的更改。这叫做painting。

React在引擎盖下使用了很多优化，我不知道所有这些（也会争辩说，我不需要知道他们做了什么），但这里有些事要记住：

1. 只要你的render方法返回相同的东西，反应将在屏幕上无效。
2. 因此，预计反应可能多次调用render方法，即使您不期望它。
3. 因此，建议您保持渲染方法不受任何副作用或任何资源密集型操作（如获取数据或转换数据结构）。可以把它想象成：render方法应该只有与需要渲染的内容相关的逻辑，它可能需要做的任何其他事情，可以在外部计算并放入状态或变量甚至是memoized。