调用渲染与绘制 DOM?

2024-03-24

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

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

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

提前致谢!


首先一些简化的定义:

  1. 浏览器使用dom来决定显示什么。在反应中,这被称为painting,因为每当某物添加到 dom 后,浏览器必须重新绘制屏幕。
  2. dom操纵的代价是高昂的。无论是时间还是资源
  3. React 看起来如此快的原因之一是它使用了人们称之为virtual dom。虚拟 dom 尝试镜像实际 dom,它们可能会暂时不同步,因为对虚拟 dom 的所有更改都不会立即反映在实际 dom 上(否则拥有虚拟 dom 有什么好处?)

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

  1. 当反应时会发生火灾render方法来填充它的虚拟DOM
  2. 它会保留batching虚拟 dom 的变化,一旦确定了合适的时机change屏幕上,它只会刷新changes到大教堂。这就是所谓的painting.

React 在底层使用了很多优化,我不知道所有这些优化(我也认为,我不需要知道它们做了什么),但这里有一些需要记住的事情:

  1. 只要你的render方法返回相同的内容,反应不会在屏幕上执行任何操作。
  2. 因此预计 React 可能会调用render方法多次,即使您别指望 it to.
  3. 因此,建议您的渲染方法不要有任何副作用或任何资源密集型操作,例如获取数据或转换数据结构。将其视为:render方法应该只具有与需要渲染的内容相关的逻辑,它可能需要执行的任何其他操作都可以在外部计算并放入状态或变量甚至被记忆。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

调用渲染与绘制 DOM? 的相关文章

随机推荐

  • 为使用 mat-autocomplete 的组件编写单元测试

    我是 Angular 的新手 我正在尝试使用 Angular 5 构建一个具有自动完成功能的文本字段 我在中找到了这个例子角度材质文档 https material angular io components autocomplete ex
  • mysql查询两张表

    我需要像这样查询两个表 表一顾客 id companyname phone 1 microsoft 888 888 8888 2 yahoo 588 555 8874 3 google 225 558 4421 etc 表二联系人 id c
  • Double.NaN 在 Windows 11 中导致 System.StackOverflowException (22621.525)

    Note 该代码适用于 Windows 11 22000 1098 及更早版本 但会在 Windows 11 22621 525 上导致堆栈溢出异常 我有一个错误 导致我负责的 C 程序出现大量问题 它在早期的 Windows 版本 包括早
  • 如何将日期插入 Open XML 工作表?

    我正在使用 Microsoft Open XML SDK 2 但在将日期插入单元格时遇到了很大的困难 我可以通过设置毫无问题地插入数字Cell DataType CellValues Number 但是当我对日期做同样的事情时 Cell D
  • 如何从 OpenSSL 中的 perl 脚本生成程序集文件

    在 OpenSSL 版本 1 1 0e 的开源代码中 我看到一些函数定义是由文件夹中存在的 perl 文件生成的 在加密货币内每个文件夹中的 build info 文件中 他们编写了一些行以从相应的 pl 生成 s 例如 为了生成aes p
  • Android 上的可写和可执行位置

    我已经使用 Android NDK 工具链编译了一个二进制文件 并尝试将其部署到设备上 然后 使用 JNI 使用 NDK 构建的应用程序将通过本机代码执行此二进制文件 我希望避免对设备进行root 该二进制文件将由多个应用程序使用 因此我想
  • 如何访问 docker 容器内的 mac os x 麦克风?

    我正在运行一个带有 python 代码的 docker 容器 该容器使用主机 MacBook Pro 内置麦克风录制几秒钟的声音 我面临的部分挑战是确定如何在 Docker 容器内提供访问 共享 Macbook Pro 麦克风 大多数关于堆
  • 数据库在更新时应用所有以前的迁移,而不仅仅是新的迁移

    我正在开发一个网站 截至目前 该网站既有生产数据库又有测试数据库 生产数据库托管在外部 而测试数据库托管在本地 每当我对数据库进行更改时 我都会通过迁移应用更改 添加新的迁移后 我运行更新数据库对我的生产和测试数据库执行命令以保持它们同步
  • 如何在 Spring data r2dbc 中替换 @PrePersist

    我在用spring boot starter data r2dbc 版本 1 1 3 Spring Webflux 应用程序中的模块 我想将实体生命周期回调添加到我的持久层 使用 Spring Data JPA 可以使用注释 例如 PreP
  • 如何在 EF7 或 EF core 中的运行时更改数据库架构

    我的数据库有不同的架构 具体取决于运行时的用户选择 我的代码如下 public partial class FashionContext DbContext private string schema public FashionConte
  • CSS 中的双冒号 (::) 是什么意思?

    双冒号 在 CSS 中意味着什么 例如 input type text ms clear display none 它的意思是伪元素选择器 这意味着element右边在普通 DOM 中不存在 但可以选择 伪元素由两个冒号 后跟伪元素的名称组
  • MigraDoc:设置文档字体

    我想在 MigraDoc 中使用不同的字体 但我很难让它坚持下来 目前 我正在使用以下代码 我将其作为类范围变量 String tPdfFont MonospaceTyperwriter 然后是 MigraDoc 代码本身 Document
  • 对...()感到困惑?

    In 另一个问题 https stackoverflow com a 12417320 636656 sapply substitute as character 在函数内部使用来获取传递给函数的名称 这as character部分听起来不
  • 使用php将单词数组转换为字符串

    我有一系列关键字 数组 gt 房子 桌子 马 树 我需要从中创建一个字符串 如下所示 房子 桌子 马 树 我怎样才能用 PHP 做到这一点 Use implode https www php net manual en function i
  • Xamarin Shell:将多个参数传递到另一个页面

    我的 Xamarin Forms Shell 应用程序中有两个页面 一个是列表页面 另一个是详细信息页面 当我选择列表页面中的项目时 将显示详细信息页面 我能够将一个参数传递到第二页 我知道如何传递第二个值 但是我应该如何接收第一个属性本身
  • 设置 llvm::ConstantInt 的值

    我正在玩 LLVM 我考虑过改变中间代码中常量的值 然而对于班级llvm 常量Int http llvm org docs doxygen html classllvm 1 1ConstantInt html 我没有看到设置值函数 知道如何
  • f77 未格式化二进制文件的内容

    我有一个 f77 未格式化的二进制文件 我知道该文件包含 2 个浮点数和一个长整数以及数据 文件的大小为 536870940 字节 应包含 512 3 个浮点数据值以及 2 个浮点和长整数 512 3 个浮点数据值组成 536870912
  • 将 HTML 文件导入到另一个 HTML 文件中

    我想知道如何将 HTML 文件导入到其他 HTML 文件中 这两个文件都引用许多不同的文件 因此我更愿意将它们保存在两个不同的文件夹中 而不是将一个文件复制到另一个文件中 目前 我正在使用 Django 进行本地开发 include fil
  • keycloak 上是否有用于更改用户密码的 API 调用?

    我正在尝试实现自己的表单来更改用户的密码 我试图在 Keycloak 中找到用于更改用户密码的 API 但在文档中找不到任何内容 有API可以做到这一点吗 您可以使用PUT auth admin realms realm users id
  • 调用渲染与绘制 DOM?

    我正在学习 React 并试图更好地理解生命周期和不同阶段 我刚刚读到的一件事是 React 首先渲染然后安装元素 在这种情况下渲染意味着调用类的 render 而不是绘制 DOM 我想我只是不太明白这意味着什么 有人可以用简单的方式或举例