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，但是here的6次。我本来期望在控制台中只有here的2倍。为什么叫6次？也许Immutable.js中的序列的工作方式与我预期的不同。

更新

我使用create-react-app创建了一个非常简单的应用，以演示可以be found on Github（克隆 - ＆gt; npm run start - >浏览到localhost：3000 - ＆gt;监视控制台的问题。奇怪的是，我无法在Codepen上重现这个问题。

Answer 1

我相信这是因为Seq是懒惰的。这意味着，在.map()重复之前，不会调用传递给Seq的函数。

这就是我认为发生的事情。当你打电话

x.entrySeq.map(...)

这会创建一个新的Seq。然后，您的渲染函数会返回此Seq以作出反应。此时，console.log("here")仍然没有被调用。

现在，react会将此Seq存储在其组件树中。每次反应遍历树的这一部分（这不仅在渲染时发生），它将遍历您的Seq，而.map()将调用您传递给Seq的函数。

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

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

更新

1 个答案: