时间戳

首页 > 解决方案 > FormControl 的 setValue 实际工作的速度有多快？

javascript - FormControl 的 setValue 实际工作的速度有多快？

问题描述

例如，我有大量的字符串，并且字符串的数量随着时间的推移不断增加（我每秒都通过 websocket 获取更新的数组）。
我只需要显示组件中的所有字符串。好吧，最简单的解决方案是 ngFor 并将每个字符串包装在 div 中，但我不喜欢组件中有数百个 div 的想法。
所以我决定尝试只使用一个这样的文本区域（简要地）：

<mat-form-field>
  <textarea matInput [formControl]='myArrayofStrings'></textarea>
</mat-form-field>

而在组件中，每次我得到新数组时都更新这个值：

this.myArrayofStrings.setValue(newArray);

所以，我的问题是- 这个解决方案有多可靠、智能和快速？

也许还有其他更聪明的解决方案可以解决这个琐碎的任务。
（顺便说一句，我的堆栈是 Angular 7，Angular Material）

提前致谢。

标签： javascriptangularperformanceangular-materialangular-forms

解决方案

我认为没有什么好的方法可以为单行更新不断更新大数据对象。在 Angular 中，如果模板中引用的对象发生更改，它将被完全重新渲染，并且在您的情况下，它将生成过时的渲染，因为您之前的数据日志不会更改......所以您必须将您的日志分开从请求中获取，以及您向用户显示的数据，以避免 UI 在大数据上崩溃。

一些想法：

  1. 创建表：为标准角度材料表创建数据源，从您从套接字获取的日志中，但仅使用表数据源获取的数据：我的意思是每次，表请求其数据，您检查不断增长您的对象，并相应地返回。例如，您可以使用分页，或设置“刷新”按钮，仅根据用户需求重新渲染。（为此开始的良好基础是表示例/表通过 HTTP 检索数据

  2. 提取到更小的块： 创建一个“桶数组”，并且只推送到“桶”。例如：每个桶可以容纳 100 行日志，只要当前桶满了，你就只更新当前桶。这样只有最后 1-99 行会被重新渲染，其他项目不会。

  3. 创建数据包 创建对象，即线，并且仅在新数据超过给定长度时更新它们。例如，您仅在 50 条新行到达后或在每个 x 中更新视图。秒 - 这样您就可以将渲染和 websocket 事件分开，从而为 UI 渲染留出时间。

推荐阅读