Fatal编程技术网
  • reactjs/
  • Reactjs React中Immutable.js序列的循环计数错误

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

reactjs

Reactjs React中Immutable.js序列的循环计数错误,reactjs,immutable.js,Reactjs,Immutable.js,在React应用程序的一个组件中，我有以下代码： render() { console.log("render"); const x = Immutable.Map({a: 1, b: 2}); return ( <div> {x.entrySeq().map(() => { console.log("here"); return (<div></div>) })} &

在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>
  )
}

render（）{
控制台日志（“呈现”）；
const x=Immutable.Map（{a:1，b:2}）；
返回(
{x.entrySeq（）.map（（）=>{
console.log（“此处”）；
返回（）
})}
)
}
奇怪的是，
map
函数中的循环执行了6次（我在控制台上得到了一个
render
，但在这里执行了6次
）。我本以为控制台中的
仅为
的2倍。为什么叫6次？也许Immutable.js中的序列的工作方式与我预期的不同

更新：
我使用
create-react-App
创建了一个非常简单的应用程序来演示这个问题（克隆->
npm-run-start
->浏览到localhost:3000->监视控制台）。奇怪的是，我无法在代码笔上重现这个问题。
我相信这是因为他懒惰。
这意味着在迭代
Seq
之前，不会调用传递给
.map（）
的函数

以下是我认为会发生的事情。当你打电话的时候


x.entrySeq.map(...)


这将创建一个新的
Seq
。
然后，渲染函数返回此
Seq
以进行响应。
此时，
console.log（“此处”）
仍然没有被调用

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


如果希望避免每次react决定遍历树的这一部分时重新计算，则需要缓存
Seq
的输出。最简单的方法是在
.map（…）
之后加上
.toArray（）
。在这种情况下，
Seq
将被立即迭代一次，然后存储在一个数组中，然后您给出相应的响应。
也许使用
map
与
Seq
有问题，当您尝试
x.entrySeq（）.toArray（）
甚至
x.entrySeq.forEach（）