重新组合项目，而无需重新渲染，也没有使用React取消所有子项的安装？

Question

我目前具有以下结构：

state = {
    groups: ["one","two","three"],
    rows: {
    "one": [1,11,111], 
    "two": [2,22,222], 
    "three":[3,33,333]
    }
   }

我正在用两个嵌套的地图渲染此列表。

{this.state.groups.map(key=> {
  return (
  <div key={key}>
      <div>{key}</div>
      {this.state.rows[key].map(el=><ChildElement key={el} el={el}/>)}
  </div>
)
})}

我的目标是能够在不取消安装子组件的情况下更改分组，因为它们尚未更改。 因此，新状态为：

state = {
  groups: ["oneA","twoB","threeC"],
  rows: {
   "oneA": [1,22,111], 
   "twoB": [3,11,222], 
   "threeC":[2,33,333]
   }
}

注意：ChildrenComponents是非常复杂的UI组件，每当我重新组合它们时，重新渲染都将花费很多时间。

是否有一种结构状态的方法，所以不重新呈现ChildrenComponents？