具有样式组件性能问题的大型反应应用程序

Question

我是一个相当大的反应应用程序的开发人员。应用程序的一部分是动态加载的详细表单，可以包含大约 100 个不同数据类型（不同组件）的输入字段。在我的笔记本电脑上，此表单的初始渲染大约需要 500 毫秒，我希望让它更快。我不太确定是什么导致了这个渲染时间，但我与您分享我所拥有的：

这是反应分析器的屏幕截图。正如您所看到的，发生了一些提交，但其中一个（橙色）很突出。这是实际表单呈现的地方。表单是由布局框、其他容器和字段容器组成的层次结构，其中包含标签和数据类型组件。单个组件的渲染时间不会太长，但加起来就是 500 毫秒的原因。

如果我们仔细观察上面截图的一小部分，我们可以看到：

这是日期编辑字段内的一小部分，因为我们有一个数据类型为日期的字段而被渲染。第一个元素是样式组件

const StyledDateAbstractWrapper = styled.div`
  && {

    align-items: center;
    cursor: ${props => props.immutable ? 'not-allowed' : 'default'};
    display: flex;

    input {
      display: ${props => props.immutable ? 'none' : 'block'}

      &:last-of-type {
        display: ${props => props.immutable ? 'block' : 'none'}
      }
    }
  }
`

如你所见，没什么特别的。但渲染需要2.3ms。在一个样式按钮内，需要 5 毫秒。假设我有几个这样的东西，这就是我最终得到 500 毫秒的结果。

在这一点上，我确实认为样式组件是问题所在，因为我有一些组件按预期需要几毫秒，而许多小的样式组件包装器每个都需要超过一毫秒。

所以我的问题...我可以进一步调查什么吗？或者对于多次渲染的样式组件（例如元素选择器）是否存在明显的禁忌？

我使用styled-components 5.0.1

另一种方法是使用https://github.com/bvaughn/react-window之类的东西，但我确实没有列表。更多一些组合组件。

目前提供正在运行的应用程序有点棘手。

谢谢你的任何建议

Answer 1

如果没有看到这个案例的正确实现，我不能说太多，但据我所知，你有几个选择。

1 -display: none您可以简单地将组件从 DOM 中删除{ !immutable && <Component /> }，而不是使用组件，这样组件就不会占用 VirtualDOM 中的空间

2 - 第二个问题可能是您正在使用的表单库，这里是其中一些的性能概述。性能比较。也许更改您正在使用的库也有帮助。