Immutable.JS Seq/lazy map 性能最佳实践？

Question

我喜欢在 Preact 中使用 immutable.js。 它们可以很好地协同工作，因为除非容器是不可变的，否则 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 个字符串元素的数组，然后通过运行 map 函数创建一个包含 N 个 div 元素的第二个数组； 而 (3) 将等待构建任何东西，直到 toArray 被调用，然后它将迭代 userList 直接构建一个 div 数组。 两种方式都会产生垃圾，但在 (3) 的情况下，它将是一两个小的 seq() 对象，而在 (1) 的情况下，垃圾可能是一个完整的 N 长度数组。 但我不知道 immutable.js 或 Javascript VM 是否在实践中以这种方式工作。

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

Answer 1

事实是，您可以做得比您提到的所有三个选项都好。 由于OrderedSet是可迭代的，并且您的目标是从中创建一个普通数组，您可以使用 ES6 标准Array.from函数及其第二个回调参数（映射器）：

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