草庐IT

javascript - 为什么 React JS 不自动为动态子项生成 key ？

coder 2024-05-16 原文

在编写 ReactJS 代码时，我必须为动态子项提供 key 。例如:

render() {
  const {options} = this.state
  const availableOptions = options.map(opt => {
    return (
      <option key={opt.id} value={opt.id}>{opt.displayValue}</option>}
    )
  }

  return (
    <select onChange={this._onOptionSelect}>
      {availableOptions}
    </select>
  )
}

我明白为什么他们的 key 在那里。但为什么我必须给他们？不能仅仅分配一个流水号或 UUIDv4 或其他东西来使用react吗？

相关文档:http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

最佳答案

Tl;dr

您需要为与该元素的数据(可能是来自数据库字段的 id 或其他东西)关联的动态元素分配一个唯一键，因为它会停止不必要的重新呈现。这是 React 的主要吸引力，也是它以性能着称的原因。

原因

您需要为动态子项分配一个唯一键，因为这就是 React 的 virtual DOM 的方式。将该元素与特定 数据片段相关联。我认为一个例子可以帮助说明。

假设您有一个包含 1,000 个动态生成的项目的列表。您可以只使用 index从 map 传入的参数函数为这些项目动态分配一个键。但是，如果您想更改这些项目的顺序怎么办——也许按字母顺序对它们进行排序？因为key这些项目没有绑定(bind)到特定的数据片段，而是动态生成的，React 虚拟 DOM 没有办法跟踪这些元素。这意味着它必须重新呈现 所有 1,000 个元素才能更改排序。但是，假设这些项目中的每一个都分配了一个唯一的 ID，该 ID 从数据库中填充。虚拟 DOM 足够聪明，可以看到即使元素的顺序发生了变化，元素本身中的数据仍然是相同的。因此，它将重新呈现没有的元素，尽管它们的顺序已更改。

如果有任何不清楚的地方，一旦您剖析了虚拟 DOM 的真正工作原理，它就完全有意义了。本质上，虚拟 DOM 是实际 DOM 的副本。 React 比较两者并且只重新渲染实际发生变化的部分。这就是 React 获得速度的地方。假设您有一个包含 3 个动态 <Item /> 的列表组件，并且您也在动态生成它们的 key 。

<Item key="1">Banana</Item>
<Item key="2">Orange</Item>
<Item key="3">Apple</Item>

现在，如果您按字母顺序重新排列这些项目，它们的键也将动态重新分配。

<Item key="1">Apple</Item>
<Item key="2">Banana</Item>
<Item key="3">Orange</Item>

此时 React 比较键 1 的内容，看看它是否与键 1 的先前渲染相比发生了变化。它已经完全重新渲染该元素。然后它检查 key 2。它的内容也已更改，因此会重新呈现。整个列表都是如此。

现在想象一下，每个项目在数据库中都有一个与之关联的唯一 ID，您将其指定为键。

<Item key="782364">Banana</Item>
<Item key="434533">Orange</Item>
<Item key="834535">Apple</Item>

现在我们按字母顺序对该列表重新排序:

<Item key="834535">Apple</Item>
<Item key="782364">Banana</Item>
<Item key="434533">Orange</Item>

此时 React 将检查键为 834535 的项目的内容是否仍然相同。好吧，内容还是一样的!因此，虽然该元素的顺序不同，但它不会 重新呈现。然后它检查键为 782364 的元素，发现它的内容也是相同的。这也适用于整个列表。

虽然在小列表中，您可能不会注意到动态生成的键与直接绑定(bind)到该元素数据的键之间的区别，但对于大列表，性能优势是巨大。这确实是 React 的主要吸引力 - 非常智能的重新渲染。

关于javascript - 为什么 React JS 不自动为动态子项生成 key ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35338923/

子项javascriptItemcodekeyreactjs

有关javascript - 为什么 React JS 不自动为动态子项生成 key ？的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  3. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  4. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  6. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  7. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  8. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  9. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  10. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

随机推荐