为什么默认情况下不是所有 React 组件都用 React.memo() 包装?

2024-04-08

我刚刚了解到React.memo()并想知道,我们什么时候不想要这种行为?我们不是总是希望组件仅在其 props 发生更改时才重新渲染吗?


这是因为记忆本身不是免费的,你不应该在任何地方使用它。因为:

  • 记忆化本身在比较一个渲染与下一个渲染的值时会产生性能成本。在某些罕见的情况下,这实际上可能大于渲染成本。
  • 您无法编写适用于每种情况的通用比较函数。反应备忘录的第二个参数很重要。开发人员在其中定义组件应该重新渲染的 props 的具体更改。这通常比简单的 1:1 道具更改在两个方面更复杂。首先,要比较的值可能不是可以轻松比较的值(例如字符串或整数),而是复杂的对象或对函数的引用等。其次,您可能只希望在某个组合的 prop 更改时进行重新渲染发生。因此,通过在任何地方启用它,您将要求开发人员为系统中的每个组件考虑这一点,这将是一项非常庞大且容易出错的任务。对于大多数组件来说,这也可能带来很少的增益。仅当您有问题需要解决时才应该执行所有这些操作。
  • 当您遇到性能问题时,记忆化很有用,但在您解决问题之前,使用它并不是一个好主意,因为它也会大大增加应用程序中出现错误的可能性。如果您错误地比较了某个道具,或者在以下情况下useMemo,忘记向 deps 数组添加一些内容 - 您的应用程序现在有一个错误。由于这是开发人员管理的事情 - 会发生人为错误。当毫无戒心的开发人员扩展了记忆组件的 API 然后不更新比较函数时,这种情况通常会经常发生。完全相反的情况也可能发生在记忆化函数以这样的方式编写的情况下,即它将接受并比较新的道具而无需更改,但该比较(就像如果比较一个对象,每次都会是一个差异引用)实际上结束了无论如何,每次都会触发重新渲染,使整个事情变得毫无意义(错误的安全感)。

简而言之:记忆是一种维护负担,您应该仅在个人和特定情况下通过成本效益分析来承担这一任务。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么默认情况下不是所有 React 组件都用 React.memo() 包装? 的相关文章

  • Firebase setDoc() 不创建文档

    我正在使用 auth 创建一个新用户 该用户正在工作 然后使用新创建的 uid 创建一个具有相同内容的新文档 const currentUser await auth createUserWithEmailAndPassword email
  • 避免对象突变

    我正在使用 React 和 ES6 所以我遇到了以下情况 我有一个带有对象数组的状态假设a id 1 value 1 id 2 value 2 处于以下状态Object A 然后我将列表传递给Object B通过道具 Object B 在构
  • 如何使用 Firestore 中的对象数组更新 Field 中的特定对象? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 所以我有一个emojiCounter字段用于存储对象数组 例如 emojiCounter emoji
  • 哪种反应钩子与 firestore onsnapshot 一起使用?

    我在我的 React Native 应用程序中使用了大量的 Firestore 快照 我也在使用 React hooks 代码看起来像这样 useEffect gt someFirestoreAPICall onSnapshot snaps
  • 如何解构 React props 并仍然访问其他 props?

    我很好奇如果我想要所有的 props 但也想要解构单个属性 那么组件的参数 props 是否可以像导入一样解构 我想这更像是一个 JavaScript 问题 而不是一个 React 问题 但是举个例子 import React useEff
  • 过滤嵌套的 JSON 对象

    我有一个搜索栏 您可以在其中输入员工姓名 它应该根据过滤器返回姓名 我有一个嵌套的 JSON 对象 如下所示 我需要深入了解该对象以访问数组中的员工姓名 您可以看到我尝试实现的多个选项 它们已被注释掉 我的问题是代码没有过滤名称并返回所有名
  • 如何解决此错误“不要使用对象作为类型”?

    我不明白这个错误消息造成的 我的组件有两个和一个包含对象的数据数组 我收到一条错误消息 不要使用object作为一种类型 这object类型目前很难使用 我该如何解决它 我附加了数组包含对象的数据 first tsx import data
  • 如何在ReactJS中定义常量

    我有一个将文本映射到字母的函数 sizeToLetterMap function return small square s large square q thumbnail t small 240 m small 320 n medium
  • React 组件等待所需的 props 渲染

    我正在父组件内部声明一个组件 我想在一个文件中建立特定的道具 然后在父组件中 我希望能够同时为子组件建立其他道具 因为它们是共享属性 在大多数情况下 我的问题是 子组件尝试渲染并失败 因为首先没有建立所需的道具类型 有没有办法告诉子组件等待
  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div
  • 在使用第三方东西时如何保持 Browserify 包大小合理(如果重要的话通过 grunt )

    我正在尝试捆绑我自己的代码 A 该代码又使用 2 个第三方组件 B 和 C 其中 C 也需要 B 据我所知 所有内容都是使用 CommonJS 节点样式模块编写的 捆绑后单独使用的价格为 60K B 是单独包含的 并假定是全局的 我通过在构
  • 语法:const {} = 变量名,任何人都可以解释或指出我正确的方向[重复]

    这个问题在这里已经有答案了 这个语法在 JavaScript 中意味着什么 可能是 ES6 const 变量名 我目前正在尝试掌握 React 在很多例子中我都遇到过这种语法 例如 const girls guys women men st
  • 在 React 中使用 .less 文件

    我正在尝试将 less 文件与极简主义 React 应用程序一起使用 使用创建反应应用程序 我已经添加less and less loader to my 包 json以及我的模块规则webpack config js文件 然而 类引用并未
  • 如何包装内在组件,保留大部分 Props?

    我想用我自己的 React 功能组件包装一个标准按钮 但我希望新组件的用户能够设置 几乎所有底层按钮的道具 当然 我想保持正确的打字 所以如果 WrappedButton 包含一个button then
  • 在这个反应示例中,bind 做了什么?

    什么是bind在这个声明中做this tick bind 这个 在下面的代码中 export class Counter extends React Component constructor props super props this
  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了
  • 使用 React 渲染来自 Express 的 Flash 消息

    我已经搜索了很多 但一直无法找到一种简单的方法来从 Express 获取 Flash 消息并在 React 中渲染它们 我需要访问 Express 服务器上的数据 但是存储这些数据并将其传递给 React 的最佳方式是什么 我正在考虑传递一
  • React Image:createObjectURL 链接给出错误 404(未找到)

    我在 React with Typescript 中使用以下代码创建了一个 ImageUrl 它创建了一个 URL 但不显示图片图像 单击 URL 例如 http localhost 3003 0b4de100 d8eb 49a7 b43a
  • Jest - 模拟函数,从另一个文件导入

    测试的文件使用从另一个文件导入的函数 import myFunc from myFile 如何在该文件的测试中模拟该函数的返回值 我正在使用笑话 这对我有用 我不确定这是否是一个好的做法 import as myFile from myFi
  • React 应用程序中未调用 Microsoft Graph Toolkit 组件的事件处理程序

    我正在尝试在我的 React 应用程序中使用 Microsoft Graph Toolkit 中的登录组件 它工作得很好 但我似乎无法让任何事件发生 例如 import React from react import MgtLogin Pr

随机推荐

  • POST 请求中的 %5B 和 %5D 代表什么?

    我正在尝试编写一个Java 类来登录某个网站 登录的POST请求中发送的数据是 user 5Blogin 5D username user 5Bpassword 5D 123456 我很好奇是什么 5B and 5D意味着在钥匙用户登录 我
  • AWS Redis 从外部连接

    有没有办法从外部 AWS 网络连接 AWS 上托管的 Redis 实例 我有一个基于 Windows 的 EC2 实例在 AWS 上运行 另一个是 Redis 缓存节点 我知道有人问过这个问题 但答案是在基于 Linux 的系统中 但我的是
  • 在 PL/SQL 存储过程中拆分逗号分隔的字符串

    我有 CSV 字符串 100 01 200 02 300 03 我需要将其传递给 Oracle 中的 PL SQL 存储过程 在过程中 我需要将这些值插入表中的数字列中 为此 我从这里得到了一个工作方法 如何在 oracle 9i 中最好地
  • PHP MYSQL - 根据行号是否匹配行号填充 HTML 表编号行

    所以 基本上我正在尝试制作数据中心驾驶室图 我们有一个 Excel 电子表格 但它不容易更新 也不容易搜索 我的 MySQL 数据库中有三个表 数据库是 机架 表格是 机柜 设备和数据中心 每个表格中的每一行代表它是什么 机柜表有一列指定其
  • 如何中断无限循环

    虽然我知道这样问有点傻 但我仍然想更多地了解它的技术角度 无限循环的一个简单示例 public class LoopInfinite public static void main String args for System out pr
  • 使用 Iframe 的自定义用户代理

    是的 我已经读过使用不同的用户代理加载 iframe 内容 https stackoverflow com questions 12845445 load iframe content with different user agent但我
  • PhantomJS 在评估之前更改网页内容

    我想在评估 渲染网页之前删除 HTML 元素或简单地删除网页的前 N 个字符 有什么办法可以做到这一点吗 这取决于多种场景 我将仅概述以下问题的每种答案组合的步骤 是不是有一段JS叫做onload ol 或者脚本块立即被评估 ie 它是内联
  • 使用 JavaScript 进行地理位置定位

    我正在编写一个脚本来获取地理位置 纬度 经度 我可以使用它来将我的谷歌地图实例居中 目前我使用两种可能的技术 其一是google loader ClientLocation目的 我还没有测试过这个 因为它为我返回 null 我想是因为我不住
  • 使用内置显卡,没有NVIDIA显卡,可以使用CUDA和Caffe库吗?

    使用内置显卡 没有 NVIDIA 显卡 可以使用 CUDA 和 Caffe 库吗 我的操作系统是 ubuntu 15 CPU为 Intel i5 4670 3 40GHz 4核 内存为12 0GB 我想开始学习深度学习 CUDA 适用于 N
  • 如果分析器不是答案,我们还有什么其他选择?

    看完Joshua Bloch的演讲 绩效焦虑 后 我读了他在演讲中建议的论文 评估 Java 分析器的准确性 http www plan cs colorado edu klipto mytkowicz pldi10 pdf 引用结论 我们
  • 将 Oracle 日期解析为 Java

    我正在查询数据库并获取格式为 01 SEP 22 的日期 我想在Java中将此日期转换为 yyyy MM dd 格式 我有什么办法可以做到这一点吗 java time 我建议您使用 java time 现代 Java 日期和时间 API 来
  • 如果 $(window).load() 已弃用,我应该使用什么?

    我需要一个在页面完全加载 文本 图像等 时调用的函数 我注意到 window load 现已弃用 那么 我应该使用什么 如果你想避免load函数 使用泛型on功能 window on load function insert code he
  • Drupal 中表的节点引用

    I have Drupal with CCK I have a content type named Article This Article has 5 Node references I m using the table field
  • 如何仅在筛选记录上使用 power bi 中的 MAX 函数?

    我试图选择具有最新日期的记录 数据库中的所有记录都有这些基本列 AssetNumber WorkOrderNumber ScheduledEndDate Department 我想查找特定部门中每项资产的所有最新工单 日期 我有一个基本的措
  • 具有引用数据成员的类的默认构造函数?

    我有课MyClass我需要在其中创建一个std array of std vector在默认构造函数中 但是 此类有一个数据成员 它是一个引用 类型为Something 它也需要在构造函数中初始化 但我无法在默认构造函数中执行此操作 我应该
  • 在 .NET 中,调用 .Count() 更好,还是调用 .Count(如果可用)更好?

    导入 Linq 命名空间后 可以同时使用 Count 和 Count 例如 在实现 IList 的对象上 Count 将调用 Count 属性 如果可用 如下所示 C Count 扩展方法性能 https stackoverflow com
  • Spring AOP(方面)未执行

    我使用 Spring 2 5 6 asm 1 5 3 aspectjrt aspectjweaver 1 6 1 cglib 2 1 3 在我的基于 Web 的 Spring 应用程序中 我有以下类 package uk co txttoo
  • Yii、ajax、按钮。如何防止多个JS onclick绑定

    首先 英语不是我的母语 如果我可能弄错了 我很抱歉 我创建了 Yii Web 应用程序 其中主页上有输入表单 该表单在通过 ajax 请求单击按钮后出现 表单上有一个 取消 按钮 可以使带有表单的 div 不可见 如果我单击 显示表单 和
  • 将 Google Drive 的“计算机”挂载到 Colaboratory

    我研究了官方的一些加载数据到Colaboratory的方法 但它仅通过命令将colab与Google Drive的 My Drive 文件夹连接 驱动器 mount content gdrive colab目录树的图片 https i st
  • 为什么默认情况下不是所有 React 组件都用 React.memo() 包装?

    我刚刚了解到React memo 并想知道 我们什么时候不想要这种行为 我们不是总是希望组件仅在其 props 发生更改时才重新渲染吗 这是因为记忆本身不是免费的 你不应该在任何地方使用它 因为 记忆化本身在比较一个渲染与下一个渲染的值时会