大型React应用存在样式化组件性能问题

Question

我是一个相当大的react应用程序的开发人员。该应用程序的一部分是详细表格，该表格是动态加载的，可以包含大约100个不同数据类型（不同组件）的输入字段。 在我的笔记本电脑上，此表单的初始呈现大约需要500毫秒，我想使其更快。我不太确定是什么原因导致了渲染时间，但我与大家分享了我拥有的东西：

这是react profiler的屏幕截图。如您所见，发生了一些提交，但其中一个（橙色）脱颖而出。这是呈现实际表单的地方。表单是由组成的布局框，其他容器以及包含标签和数据类型组件的字段容器组成的层次结构。单个组件的渲染时间不会太长，但是加起来就是为什么我要用500ms的时间。

如果我们仔细看一下上面的屏幕截图的一小部分，我们会看到：

这是日期编辑字段中的一小部分，因为我们有一个数据类型为date的字段，所以它被呈现。第一个元素是样式化的组件

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.3毫秒。并在样式按钮内花费5毫秒。假设我有几个，这就是我最终得到500ms的原因。

在这一点上，我真的认为样式化组件是问题所在，因为我有一些组件会像预期的那样花费几毫秒的时间，并且许多小型样式化组件包装器每个都花费一毫秒以上。

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

我正在使用样式化组件5.0.1

另一种方法是使用类似https://github.com/bvaughn/react-window的方法，但我实际上没有列表。还有一些组成部分。

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

感谢您的任何建议

Answer 1

首要的是：在可用性方面，100个表单元素是疯狂的！填满这么多（甚至四分之一）的这些元素，绝对不会让用户费劲。我建议请您的设计师/产品人员，并告诉他们提出一种更好的业务流程建模方法。

真的，请不要理会性能。没有用户会填写此表格，现在最好实现并修复它比事后再见。

性能方面：100个表单元素很多！桌面浏览器当然可以处理该HTML，但是在React中渲染所有HTML的开销在JS / DOM领域。考虑到浏览器必须完成的工作量，我想说半秒钟是非常好的。而且，在混合使用样式组件的同时，还会使CSSOM变得紧张。

还有其他一些优化和技术可以应用，尽管在您重新构建应用程序以使其不呈现太多用户无法使用的DOM元素后，就不必再使用这些优化和技术了。

Answer 2

我不能不说太多关于这种情况的正确实现，但是据我所知，您有一些选择。

1-除了使用display: none删除组件之外，您还可以使用{ !immutable && <Component /> }从DOM中删除它们，这样组件就不会在VirtualDOM中占用空间

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