我应该关心 React Redux 应用程序中的状态变化率吗?

2024-01-08

我正在使用 React、Redux 和 Websocket 实现/评估“实时”Web 应用程序。在服务器上,我的数据集以每秒大约 32 次更改的速度发生更改。

每次更改都会使用 Websocket 向应用程序发送一条异步消息。异步消息在我的 redux 状态下启动 RECEIVE 操作。状态变化导致组件渲染。

我担心的是,状态更改的频率会导致客户端出现不可接受的负载,但我不确定如何根据消息数量、组件数量等来表征负载。

这什么时候会成为问题,或者我将使用什么工具来确定这是否是一个问题?

我的状态的“形状”会对渲染性能产生影响吗?我是否应该考虑将高变化对象放置在一个实体中,而将低变化对象放置在另一实体中?

我是否应该集中精力对更改事件进行批处理,以便应用程序可以响应更改列表而不是每个单独的更改(有效降低状态更改率)?

我很感激任何建议。


这些实际上是相当合理的问题,是的,这些听起来确实都是值得考虑的好方法。

作为一个想法 - 你说你的服务器端数据更改每秒发生 32 次。这些信息本身可以批量处理吗?您真的需要显示每一个更新吗?

您可能对 Redux 常见问题解答的“性能”部分感兴趣,其中包括以下问题的答案“缩放” http://redux.js.org/docs/FAQ.html#performance-scaling and 减少商店订阅更新的数量 http://redux.js.org/docs/FAQ.html#performance-update-events.

根据更新频率部分地对状态进行分组听起来是个好主意。未订阅该块的组件应该能够根据 React Redux 的内置浅层相等检查跳过更新。

我将添加几个额外的有用链接,以获取与性能相关的信息和库。我的 React/Redux 链接存储库有一个部分反应性能 https://github.com/markerikson/react-redux-links/blob/master/react-performance.md,我的 Redux 库链接存储库有相关部分商店更改订阅 https://github.com/markerikson/redux-ecosystem-links/blob/master/store.md#store-change-subscriptions and 组件更新监控 https://github.com/markerikson/redux-ecosystem-links/blob/master/devtools.md#component-update-monitoring.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我应该关心 React Redux 应用程序中的状态变化率吗? 的相关文章

  • Jest - 测试使用react-router的组件

    我正在测试一个呈现具有以下 contextTypes 的子组件的组件 Component contextTypes router PropTypes object isRequired 我对笑话完全陌生 但来自摩卡 酶我从未遇到过这个问题
  • 设置状态时重新渲染过多 - useSWR

    我在用useSWR https swr vercel app docs data fetching获取数据 然后使用数据 我想通过使用reduce 获得总计 如果我 console log 输出该值 它工作正常 但一旦我尝试使用该值设置状态
  • 从 Context Provider 重定向 React Router

    我是 React Router 的新手 并尝试使用新的 Conext API 从提供程序内部进行重定向 基本上我的提供者看起来像这样 AuthContext js class AuthProvider extends React Compo
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • 在反应中访问回调内的 event.target

    我有以下课程片段 constructor props super props this timeout null search e gt clearTimeout this timeout this timeout setTimeout f
  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • 反应独特的“关键”错误

    我正在浏览 React 中的待办事项列表教程 并遇到以下错误 我花了相当长的时间 只是找不到错误 这是错误和组件的代码 这就是代码对于课程存储库 此提交中出现问题 https github com andrewjmead react cou
  • Flask 和 Reactjs 抛出 JSX 转换错误

    我已经开始将 ReactJS 与 Python Flask 后端结合使用 通过 Flask 渲染模板时 我在 Chrome 控制台中收到以下客户端错误 错误 找不到模块 jstransform visitors es6 templates
  • 如何在打字稿中使用react-navigation的withNavigation?

    我正在尝试结合使用react native react navigation 和typescript 来创建一个应用程序 只有两个屏幕 HomeScreen and ConfigScreen 和一个组件 GoToConfigButton 总
  • React延迟加载/无限滚动解决方案

    我花了一段时间才弄清楚如何使用优秀的延迟加载图像React Lazyload 组件 https github com jasonslyvia react lazyload 演示在滚动时延迟加载图像 但在测试时我无法获得相同的行为 罪魁祸首是
  • 单击react.js 切换列表的背景颜色

    我正在尝试创建一个具有以下功能的列表 悬停时更改列表项的背景颜色 单击时更改列表项的背景颜色 在单击的元素之间切换背景颜色 即列表中只有一个元素可以具有 clicked 属性 我已经执行了 onhover 1 和 2 功能 但无法实现第三个
  • 计算行:如何使用 AG Grid 根据同一列中其他行的值计算特定列的单元格值?

    我想使用同一列中其他行的值对特定行实施自定义计算 我发现AG Grid提供了定义的能力列定义表达式 https www ag grid com javascript data grid cell expressions and aggFun
  • 我想将我的 NEXT.js 项目链接到静态网站

    我有一个使用 HTML CSS 开发的网站 它是一个静态网站 但现在我使用 NEXT js 与 Strapi API 集成创建了一个博客项目 我的问题是如何将我的静态网站与我的 Next js 项目链接起来 我尝试使用链接标签 但没有用 i
  • 将 ESLint 与 Airbnb 样式和选项卡结合使用 (React.js)

    我正在开发一个 React js 应用程序 并且正在尝试检查我的代码 我将 ESLint 与 Airbnb 风格一起使用 但出现以下错误 src Test jsx 4 2 error Unexpected tab character no
  • 使用默认值反应路由参数

    我正在使用 React 功能组件和 React Router v5 我正在使用 useParam 函数来获取参数 当参数不可用或未定义时 如何设置参数的默认值 我的路由器代码
  • 带有服务总线的 SignalR Azure 云服务

    我使用 SignalR 构建了一个简单的聊天应用程序那里有教程 http www asp net signalr overview getting started tutorial getting started with signalr
  • 需要根据用户选择有条件地渲染具有 X 行数的部分

    我有一个反应组件 其中包含一个下拉列表 其中的选项包括none 1 5 and 13 根据用户选择的数字 我需要渲染一个部分 其中包括许多行 每个行都有字段名称和下拉列表 如果用户不选择任何一个 我需要整个附加配置部分消失 新部分中的每个下
  • Enzyme - 测试嵌套组件是否正确呈现

    我正在尝试测试当通过简单的布尔值更新状态时 在父组件中其子组件是否正确呈现 在父组件下面 class Parent extends Component render const isReady this state const props
  • 使用样式组件更改 SVG 描边的颜色

    我有一个 SVG 用作 img 标签 使用样式组件 我试图达到在悬停时更改描边颜色的程度 我导入了 SVG import BurgerOpenSvg from images burger open svg 我为它创建了一个样式组件 cons

随机推荐

  • sql group_concat 和子查询

    我有 2 个 mysql 表 car model id int Primary Key title varchar id brand int FK to car brand table car car model relation many
  • 使用 Devise 添加 TOS 协议复选框

    我们正在为我们的会员使用设备 我们已将 tos agreement 字段 布尔值 添加到我们的成员架构中 并将其添加到views devise registrations new html haml 在Member模型中 我们有一个验证规则
  • 返回类型为空

    我正在使用 PHP 7 测试返回类型 我创建了一个简单的脚本来测试 PHP 7 的返回类型
  • bash - 递增包含字母的变量

    我有一组有效字符 0 9a z 和一个分配了其中一个字符的变量 我想要做的是能够将该变量增加到集合中的下一个变量 如果需要 我可以处理 特殊 情况 即从 9 增加到 a 从 z 增加到 但我不知道如何增加字母 bin bash y b ec
  • 在文本框上手动设置不显眼的验证错误

    我正在做类似于远程验证的事情 除了我已经通过 jquery 手动进行调用并设置我必须设置的任何内容 现在我的问题是 如果我想告诉验证器特定的文本框无效 并阻止页面提交 突出显示文本框等 我将如何从代码中做到这一点 Html LabelFor
  • 带有自定义 API 视图的 Django Rest 框架分页

    我正在尝试将分页添加到我的项目中 但找不到任何明确的文档或教程 我有一份办公室清单 楷模 办公室 py class Office Model name CharField name default None max length 255 n
  • python 中的 while 循环只要正则表达式匹配

    好的 我知道这可能不是在循环中使用正则表达式编辑字符串的最佳方法 只是为了感兴趣 我将如何构建一个循环 只要匹配就执行正则表达式模式 在循环中运行并在不再命中时停止 我在 python 中做这个 match re search r patt
  • OxyPlot - 如何删除轴

    我想创建一个没有任何可见轴的 Oxyplot 视图 谁能告诉我该怎么做 为了避免误解 我从未在绘图模型中添加任何轴 此代码已经添加了轴 如何避免它们被显示 C plot new PlotModel var ser new LineSerie
  • FirebaseRecyclerAdapter 和 Android 上的多种项目类型

    我想添加 2 种类型 有图像 没有图像 in my recyclerview 我知道我需要重写方法FirebaseRecyclerAdapter但我不知道怎么做 请帮我解决这个问题 Override public int getItemVi
  • Spark Streaming 2.0.0 - 在负载下几天后冻结

    我们在带有 Spark 2 0 0 的 AWS EMR 5 0 0 上运行 从 125 个分片 Kinesis 流中使用 使用 2 个消息生成器提供 19k 个事件 秒 每条消息大小约为 1k 使用 20 台机器组成的集群进行消费 该代码有
  • 如何将 Kafka 承诺的消费者偏移量更改为所需的偏移量

    我有卡夫卡流应用程序 我的应用程序正在成功处理事件 如何使用所需的偏移量更改 Kafka 提交的消费者偏移量以重新处理 跳过事件 我试过如何更改主题的起始偏移量 https stackoverflow com questions 29791
  • Zend 2 中两个表的并集

    我想用 zf2 中的 where 子句合并两个表 表1 app followers表2 应用程序用户其中条件可以是任何东西并按updated date 排序 请让我知道 zend 2 的查询 Thanks Using UNION is ZF
  • 在OData中引入自定义属性

    在我的数据库用户表中 我有名为 DateDeleted 的 DateTime 字段 当用户存在时该字段为空 并且当用户 被删除 时设置为正确的值 我想知道是否有一种方法可以为 User 实体引入 IsDeleted 属性 以便 http o
  • 如何将解析后的数据从一个单元格提取到另一个单元格

    给定一个电子表格单元格 其中包含一个由一系列连字符连接的字符段组成的字符串 我需要提取最后一个段 例如 考虑 A 列包含数据字符串 例如XX XXX X XX XX G10 where X表示任意字符 我需要在 B 列中输入什么公式才能得到
  • 使用 Javascript 在多个 CSS 文件之间切换

    我目前正在尝试制作一系列按钮 网站的用户可以单击这些按钮来在不同的 CSS3 文件之间进行更改 这将改变某些效果 为了实现这个目标 我需要某种方式来访问 href example1 css 我的 HTML 中的标签 并将其更改为 href
  • Jenkins - 最大并发作业数

    我可以在 Jenkins 中同时运行的最大作业数是多少 Jenkins 作业的最大数量取决于您在主站和从站中设置的限制 通常 我们会限制核心数量 但您的里程可能会有所不同 具体取决于可用内存 磁盘速度 SSD 的可用性以及源代码的重叠 对于
  • 如何更改 F# 交互式换行符

    在 fs 文件中 换行符表示为 r n 但在 F 交互窗口中是 n 在我当前正在尝试解决的问题中 多行文字字符串的长度很重要 因此 当我在 F 交互窗口中测试代码时出现问题 因为字符串的长度与正常执行时的长度不同 我希望有一个选项可以将 F
  • jQuery DataTables sDom 命令不起作用

    我需要左上角的 过滤器 和右上角的 大小 但不起作用 document ready function jQuery example dataTable sDom lt top fl gt rt lt bottom ip gt lt clea
  • 在vba中一次循环遍历所有可用的自动筛选条件

    我想知道是否有一种方法可以获取列表中所有不同的自动过滤条件 以便迭代每个条件 最后复制并粘贴每个不同的表 这些表在迭代时会显示在单独的工作表中 理想情况下 这将运行 n 次 ActiveSheet Range AllRows AutoFil
  • 我应该关心 React Redux 应用程序中的状态变化率吗?

    我正在使用 React Redux 和 Websocket 实现 评估 实时 Web 应用程序 在服务器上 我的数据集以每秒大约 32 次更改的速度发生更改 每次更改都会使用 Websocket 向应用程序发送一条异步消息 异步消息在我的