React 中 Immutable.js 序列的错误循环计数

Question

在我的 React 应用程序的一个组件中，我有以下代码：

render() {
  console.log("render");
  const x = Immutable.Map({a: 1, b: 2});

  return (
    <div>
      {x.entrySeq().map(() => {
        console.log("here");
        return (<div></div>)
      })}
    </div>
  )
}

奇怪的是map函数里面的循环执行了6次（我在控制台上得到了一个render，但是执行了6次here）。我本以为控制台中的 here 只是 2 倍。为什么叫6次呢？也许 Immutable.js 中的序列与我预期的不同。

更新：

我使用 create-react-app 创建了一个非常简单的应用程序来演示可以 be found on Github 的问题（克隆 -> npm run start -> 浏览到 localhost:3000 -> 观看控制台).奇怪的是，我无法在 Codepen 上重现该问题。

Answer 1

我认为这是因为 Seq 懒惰。这意味着 您传递给 .map() 的函数不会被调用，直到 Seq 被迭代。

这是我认为会发生的情况。当你打电话

x.entrySeq.map(...)

这将创建一个新的 Seq。然后你的渲染函数 returns 这个 Seq 返回反应。此时console.log("here")还没有调用

现在 React 正在将这个 Seq 存储在它的组件树中。每次 React 遍历树的这一部分（这不仅在渲染时发生），它会遍历你的 Seq，这反过来会调用你传递给 .map().[=25= 的函数]

如果你想避免每次 react 决定遍历树的这一部分时重新计算，你需要缓存你的 Seq 的输出。最简单的方法是在 .map(...) 之后加上 .toArray()。在此 Seq 将立即迭代一次，然后存储在一个数组中，然后您将其给出反应。

React 中 Immutable.js 序列的错误循环计数

Wrong loop count of Immutable.js sequence in React

reactjs

immutable.js

更新：