reactjs - 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很懒。 这意味着在迭代Seq之前不会调用您传递给.map()的函数。

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

x.entrySeq.map(...)

这会创建一个新的Seq。 然后，您的渲染函数返回此 Seq 以进行 react 。 此时，console.log("here")仍未被调用。

现在，React 正在将此 Seq 存储在其组件树中。 每次 React 遍历树的这一部分(这不仅在渲染时发生)，它会迭代您的 Seq，这反过来又会调用您传递给 .map() 的函数.

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