调用渲染与绘制 DOM？

Question

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

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

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

提前致谢！

Answer 1

首先是一些简化的定义：

1. 浏览器dom用来决定显示什么。在 React 中，这被称为Painting，因为每当向 dom 添加某些内容时，浏览器都必须重新绘制屏幕。
2. dom操作成本很高。无论是时间还是资源
3. react 看起来如此之快的原因之一是它使用了人们称之为virtual dom. 虚拟 dom 尝试镜像实际 dom，它们可能会不同步一段时间，因为对虚拟 dom 的所有更改都不会立即反映在实际 dom 上（否则拥有虚拟 dom 有什么好处？）

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

1. 当 react 将触发render方法来填充其虚拟 dom
2. 它将不断批量更改对虚拟 dom 的更改，一旦确定了更改屏幕的好时机，它将仅刷新对 dom的更改。这称为painting.

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

1. 只要您的render方法返回相同的内容，react 就不会在屏幕上执行任何操作。
2. 因此，预期 react 可能会render多次调用方法，即使您不希望它这样做。
3. 因此，建议保持您的渲染方法没有任何副作用或任何资源密集型操作，例如获取数据或转换数据结构。把它想象成：render方法应该只具有与需要呈现的内容相关的逻辑，它可能需要做的任何其他事情都可以在外部计算并放入状态或变量中，甚至可以记忆。