Javascript 反应：在每个循环上按条件显示元素是一种性能拖动？

我正在考虑为大量数据元素设置两种设置。可以按下每个元素以拉出一个包含元素细节的模态。在一个版本中，我只有一个模态，它被告知父状态选择了哪个元素。在另一个版本中，每个元素都有自己的模态，在每个循环期间，该模态被永久分配一个id。我喜欢在每个模式中内置ID的简单性（不必担心与状态相关的竞争条件等），但我不知道同时在页面上显示所有这些有条件显示的模式是否会对性能造成影响。下面是我所说的两个简单例子：

在第一个版本中，只有一个模式，并通过父状态中存储的内容告知当前选择的元素：

function Page() {
  const [showModal, setShowModal] = React.useState(false)
  const [selectedId, setSelectedId] = React.useState()

  function elementSelected(id) {
    setSelectedId(id)
    setShowModal(true)
  }

  return (
    <View>
      {largeGlobalSet.map({id} => <Element key={id} onPress={() => elementSelected(id)} />)}
      {showModal && <Modal id={selectedId} />}
    </View>
  )
}

功能页（）{
const[showmodel，setshowmodel]=React.useState（false）
const[selectedId，setSelectedId]=React.useState（）
功能元素已选定（id）{
setSelectedId（id）
设置显示模式（真）
}
返回(
{largeGlobalSet.map（{id}=>elementSelected（id）}/>）}
{showmodel&&}
)
}

在另一个版本中，每个元素都有自己的模式，该模式被永久分配一个与元素匹配的id

function Page() {
  return (
    <View>
      {largeGlobalSet.map({id} => <ElementWithModal key={id} id={id} />)}
    </View>
  )
}

function ElementWithModal({id}) {
  const [showModal, setShowModal] = React.useState(false)

  return (
    <View>
      <Element onPress={() => setShowModal(true)}>
      {showModal && <Modal id={id} />}
    </View>
  )
}

功能页（）{
返回(
{largeGlobalSet.map（{id}=>）}
)
}
function ElementWithModal（{id}）{
const[showmodel，setshowmodel]=React.useState（false）
返回(
setShowModal（真）}>
{showmodel&&}
)
}

根据模式实现，可能是清洗。许多模态实现使用react门户并将单个节点注入DOM中以显示模态，因此，如果许多组件为回调控制模态可见性而“斗争”，或者如果它们不是，那么这就有点无关了，因为这只是一个竞争条件，最后一个设置它的组件获得了它。我已经看到了一些允许同时打开多个模态的模态包，但它们将使用更多的门户或注入的DOM节点。你的代码片段中的模态解决方案是什么？我并不是说附加的元素是模态就可以成为相关信息，但那是我的错，我没有打开那扇门。我应该给它命名，因为我只是想问，在每个循环中有一个条件显示的元素是否有问题，这样我就知道将来的任何通用情况。但为了回答您的问题，我使用的是React原生文件，因此在我的实际代码中，我对每个模式也有详细的说明。我在模态上使用了可视性，而不是条件。啊，我明白了，很抱歉。在这种情况下，我认为答案是否定的，这种模式本身不应该对性能产生负面影响。React在它维护的虚拟DOM中完成所有的扩散；它可以查看

showmodel

（或任何条件）是否已更改，如果它是组件状态的一部分或作为道具传递。渲染函数是一个纯函数，因此只要状态或道具没有改变，那么输出就不一样，react将只返回最后渲染的输出。如果感兴趣，您可以进行浅层深入，如果您选择从那里读取链接的文档，这将导致更深层次的深入。酷。谢谢你的信息和链接@drewrese根据模式实现，它可能是一个清洗。许多模态实现使用react门户并将单个节点注入DOM中以显示模态，因此，如果许多组件为回调控制模态可见性而“斗争”，或者如果它们不是，那么这就有点无关了，因为这只是一个竞争条件，最后一个设置它的组件获得了它。我已经看到了一些允许同时打开多个模态的模态包，但它们将使用更多的门户或注入的DOM节点。你的代码片段中的模态解决方案是什么？我并不是说附加的元素是模态就可以成为相关信息，但那是我的错，我没有打开那扇门。我应该给它命名，因为我只是想问，在每个循环中有一个条件显示的元素是否有问题，这样我就知道将来的任何通用情况。但为了回答您的问题，我使用的是React原生文件，因此在我的实际代码中，我对每个模式也有详细的说明。我在模态上使用了可视性，而不是条件。啊，我明白了，很抱歉。在这种情况下，我认为答案是否定的，这种模式本身不应该对性能产生负面影响。React在它维护的虚拟DOM中完成所有的扩散；它可以查看

showmodel

（或任何条件）是否已更改，如果它是组件状态的一部分或作为道具传递。渲染函数是一个纯函数，因此只要状态或道具没有改变，那么输出就不一样，react将只返回最后渲染的输出。如果感兴趣，您可以进行浅层深入，如果您选择从那里读取链接的文档，这将导致更深层次的深入。酷。谢谢你的信息和链接@德雷雷雷人