Immutable.JS Seq/惰性映射性能最佳实践？

Question

我喜欢将 immutable.js 与 Preact 一起使用。它们可以很好地协同工作，因为 React/Preact 的状态与容器的交互很糟糕，除非容器是不可变的。

我发现自己遇到的情况（这里是一个自包含的示例；请参阅分支 libp2p-preact，源代码 src/index.tsx；它是带有 JSX 的 TypeScript）是我有一个充满字符串的不可变容器，我需要将它们渲染为 JSX。我通常这样做的方法是创建一个 JSX.Elements 数组并将它们内联到 JSX 节中。所以在这个例子中，我有一个

OrderedSet<List> userList

:

const users = userList.toArray().map(
  s => <div className="Id">{s}</div>
)
return <div className="ListBox">
  <div className="List">{users}</div>
</div>

但是：我可以想出多种不同的方式来创建它

JSX.Element[] users

。

1. 让ES6来做地图

   const users = userList.toArray().map(s => <div>{s}</div>) 
   

2. 让

   Immutable.OrderedSet

   做地图

   const users = userList.map(s => <div>{s}</div>).toArray()
   

3. 让

   Immutable.Seq

   做地图

   const users = userList.toSeq().map(s => <div>{s}</div>).toArray()
   

我假设2是最糟糕的选择，因为我认为实际上创建了整个第二个临时OrderedSet，它肯定比数组更重量级，而且我认为不会发生任何懒惰行为。

但是，原则上，3 可能更好，因为 Seq 所做的一切都是“懒惰”的。所以这是我的问题：（3）实际上比（1）更好吗？如果是这样，为什么？

如果你问：“如何更好？”，我关心的是创建的垃圾量，以及扫描列表的次数。我使用 C# 的时间让我非理性地避免创建不必要的大型垃圾数组。

我的假设是（3）比（1）更好，特别是当 userList 很大时，因为（1）将创建一个包含 N 个字符串元素的数组，然后创建第二个包含通过运行映射创建的 N 个 div 元素的数组功能;而 (3) 将等待构建任何内容，直到调用 toArray，然后它将迭代 userList 直接构建 div 数组。两种方式都会产生垃圾，但在 (3) 的情况下，它将是一个或两个小的 seq() 对象，而在 (1) 的情况下，垃圾可能是一个完整的 N 长度数组。但我不知道 immutable.js 或 Javascript VM 在实践中是否以这种方式工作。

（注意 Preact 对于这个问题可能并不重要；重要的是我有一个不可变的标识符集合，我想将其转换为一个数组，并在每个元素上完成一个简单的 map fn 。）

我不同意我的话被用来训练 OpenAI。

Answer 1

事实是，您可以比您提到的所有三个选项做得更好。由于

OrderedSet

是一个可迭代对象，并且您的目标是从中创建一个普通数组，因此您可以使用 ES6 标准

Array.from

函数及其第二个回调参数（映射器）：

const users = Array.from(userList, s => <div>{s}</div>)