reactjs - 调用渲染与绘制 DOM？

Question

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

我刚刚读到的一件事是“React 首先渲染然后挂载元素。在这种情况下渲染意味着调用类的 render()，而不是绘制 DOM”

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

提前致谢!

Answer 1

首先是一些简化的定义:

浏览器使用 dom 来决定显示什么。在 React 中，这被称为 绘制 ，因为每当向 dom 添加内容时，浏览器都必须重新绘制屏幕。

dom 操作代价高昂。无论是时间还是资源

react 看起来如此之快的原因之一是它使用了人们称之为 virtual dom 的东西。虚拟 dom 尝试镜像实际 dom，它们可能会不同步一段时间，因为对虚拟 dom 的所有更改都不会立即反射(reflect)在实际 dom 上(否则拥有虚拟 dom 有什么好处？)

考虑到这些定义，让我们来看看 React 做了什么:

当 react 会触发 render 方法来填充它的虚拟 dom

它将不断批处理对虚拟 dom 的更改，一旦确定了更改屏幕的好时机，它只会刷新对 dom 的更改。这称为 painting 。

React 在幕后使用了很多优化，我不知道所有这些(也会争辩说，我不需要知道它们做什么)，但这里有一些需要记住的东西:

只要你的 render 方法返回相同的东西，react 就不会在屏幕上做任何事情。

因此，预期 react 可能会多次调用 render 方法，即使您 不期望 它。

因此，建议您的渲染方法没有任何副作用或任何资源密集型操作，例如获取数据或转换数据结构。把它想象成:render 方法应该只具有与需要渲染的内容相关的逻辑，它可能需要做的任何其他事情，都可以在外部计算并放入状态或变量中，甚至内存。