【问题标题】:Calling render vs painting the DOM?调用渲染与绘制 DOM?
【发布时间】:2018-07-04 09:22:17
【问题描述】:

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

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

我想我只是不明白这意味着什么。有人可以用简单的方式或举例说明吗?

提前致谢!

【问题讨论】:

标签: reactjs react-dom


【解决方案1】:

先做一些简化的定义:

  1. 浏览器使用dom 来决定显示什么。在 react 中,这被称为 painting,因为每当 something 添加到 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 方法应该只具有与需要渲染的内容相关的逻辑,它可能需要执行的其他任何操作都可以在外部计算并放入状态或变量甚至记忆中。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-26
    • 2018-06-09
    相关资源
    最近更新 更多