Javascript 初始渲染后非常长的React脚本冻结程序

我正在使用ReactJS制作康威《生活游戏》的翻拍版。到目前为止，我只渲染了一个静态游戏场，共有19200个小div，其中160个cols乘120行

电路板的渲染速度似乎还可以，但由于某种原因，程序挂起了整整一分钟。当我看chromedev工具（我还是新手）时，它似乎显示了一些渲染，如果编写一个完整堆的脚本，则需要整整一分钟，然后是另一个快速渲染。脚本键上给定的颜色与侦听器的颜色相同

我不确定是什么挂断了它，因为在这一点上，我的react应用程序中的一切都是静态的，相对简单

对于这种设置，19200个小div是否太多？似乎不太可能。或者，在分配大量事件侦听器时，这件事不知何故冻结了吗？我该如何解决这个问题

请帮忙。我真的需要了解背景中发生了什么。 对任何人的额外爱的答案帮助我下一次自己解决类似的问题

/**
*@desc React类场渲染游戏场
*@param{Array}state.fieldE-偶数迭代游戏板数组
*@param{Array}state.fieldO-奇数迭代游戏板数组
*@param{Sting}props.config-默认未定义。名称设置初始字段配置
*@param{Boolean}props.continue-字段继续迭代，而continue true
*@param{Number}props.speed-设置迭代之间的时间
*@param{Number}props.zoom-设置父容器中的板缩放
*@param{LifeGame~Callback}props.onReset-重置字段并切换父重置状态
*@param{LifeGame~Callback}props.incGen-重置字段并切换父重置状态
*@returns{HTML}可玩游戏场
*/
类字段扩展了React.Component{
建造师（道具）{
超级（道具）
this.onReset=this.onReset.bind（this）；
此.state=({
菲尔德：未定义，
菲尔多：未定义，
});
}
///将处于状态的fieldE和fieldO设置为零填充数组
onReset（）{
常量字段=[]；
fieldE.length=19200；
设i=0；
而（i<19200）fieldE[i]=0，i++；
常数fieldO=[…fieldE]；
这是我的国家({
菲尔德，
菲尔多
});
}
组件willmount（）{
这个.onReset（）；
}
render（）{
log（'props:'，this.props）；
console.log（'state:'，this.state）；
//将适当的字段数组转换为HTML以进行输出
const evenGen=（this.props.generation%2==0）；
const fArr=evenGen？[…this.state.fieldE]：[…this.state.fieldO]；
设len=fArr.长度；
设cols=Math.sqrt（4/3*len）；
let field=fArr.map（（el，i）=>{
如果（i+1%cols==0）{
返回}
返回；
});
让外场=[]，
i=0，
j=0；outField.length=cols；
//使用“外场”将场分隔为由div封装的行
而（j{
字段切片（j，j+cols）
}