reactjs - 为什么 React 应用程序在布局渲染阶段表现不佳？

Question

这里有可以容纳 child 的盒子。如果您单击一个框，它将为其添加一个子项。

https://codesandbox.io/s/suspicious-fire-e2jes

我很难理解的是，为什么随着最大深度的增加，创建子对象所需的时间会越来越长？

根据性能审计，问题不在于为节点定义父节点的数据结构格式，而不在于为节点定义所有子节点。

所以问题是布局。据我所知，一种反模式是你一遍又一遍地读-写-读-写样式，这迫使浏览器在每次读取之前计算布局。我在我的代码中没有看到任何此类内容。

Answer 1

问题肯定是布局。但不是你的布局。 我尝试了你的代码，但没有加载你的 style.css 文件。 它按预期工作。

我创建了一个类似的用例，但没有使用react。这里的纯 CSS 具有相同的 dom 结构:

const node = (id, children) => `
  <div class='node'>${id}</div>
  <div class='children'>
    <div class='nodeAndChildren'>
      ${children}
    </div>
  </div>

`

document.getElementById("app").innerHTML = `
<div class='nodeAndChildren'>
  ${node(0, node(1, node(2, node(3, node(4, node(5, node(6, node(7, 'end'))))))))}
</div>
`;

.App {
  font-family: sans-serif;
  text-align: center;
}

.nodeAndChildren {
  display: grid;
  grid-auto-flow: column;
}

.node {
  width: 100px;
  border: 1px solid black;
}

.children {
  display: grid;
}

<div id='app'/>

即使在这里，您也可以看到这有多慢。

对于 css 或网格布局来说，这似乎是一个奇怪的模式匹配问题。 所以，我只尝试了内联样式，仍然很慢 https://codesandbox.io/embed/displaygrid-bug-bcgsm

我的建议是使用 css 列而不是网格。或者只是用 wrapper 弯曲盒子。