小编Met*_*ann的帖子

我尝试实现异步react-select(Select.Async).问题是,我们想在redux-saga中进行提取.因此,如果用户键入内容,则应触发获取操作.然后佐贺取出记录并将它们保存到商店.这项工作到目前为止.不幸的是,loadOptions必须返回一个promise或者应该调用回调.由于新检索的选项通过更改属性进行传播,因此我看不到将Select.Async与saga一起使用来执行异步提取调用.有什么建议？

 <Select.Async
   multi={false}
   value={this.props.value}
   onChange={this.onChange}
   loadOptions={(searchTerm) =>  this.props.options.load(searchTerm)}
  />

我有一个hack,我将回调分配给一个类变量并在componentWillReceiveProps上解析它.那样丑陋,不能正常工作,所以我寻找更好的解决方案.

谢谢

我是一个相当大的反应应用程序的开发人员。应用程序的一部分是动态加载的详细表单，可以包含大约 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之类的东西，但我确实没有列表。更多一些组合组件。

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

谢谢你的任何建议

我有一个一般的架构react-redux问题是否使用子应用程序方法.

目前我们正在开发通用列表/详细信息视图.对于list-view,我们使用redux-saga检索数据并将它们保存到redux存储并将它们连接到列表组件.在分页/搜索时,我们触发一个刷新这些数据的操作.要求是,细节视图可以包含相关记录的列表视图(子列表).根列表视图和子列表在视觉上几乎相同,除非默认情况下搜索表单不可见,并且操作应该以不同方式工作(仅检索相关数据,行单击不应显示子列表中的详细信息...)

要解决这个问题,我可以想到两个解决方案:

-1-重用组件,共享商店

我们可以重用list-view容器.对于动态数量的子列表,我们必须在商店中存储具有id的数据.在分页等方面,我们必须替换正确的数据集.垃圾收集必须手动处理.

-2-子应用程序方法

如下所述:Isolated Subapps我们可以创建detail/list-view的隔离组件.如果我们想要一个子网格,我们只需要包含这个组件.这与我们用于根列表视图的相同.

PRO /缺点

对于子应用程序,我看到了自治的优势.数据可以保存在单独的商店中,我们不必在商店中实现"基于ID"的东西.我们可以销毁子应用程序,商店也会被删除.在缺点方面,一些数据正在根级检索,因为我们不希望子应用程序执行相同的REST调用来获取这些数据,我们需要找到一种方法将这些信息发送到子应用程序.并且行单击可能会对根视图产生影响(重定向)因此子应用程序需要发送数据并获取根元素的数据,因此不会像我希望的那样孤立.

有没有人用任何方法获得一些宝贵的经验？任何反馈将不胜感激!