javascript - React Redux 在单个对象属性更改时重新呈现整个列表

标签 javascript reactjs redux immutable.js

我的商店中有一个包含多个对象的列表 (immutable.js)。 此列表在组件中显示为包含行的表格。这些行是显示单个对象的子组件。这些对象的一个​​属性应该是可编辑的。所以 onChange() 我派发了一个应该改变那个特定对象的属性的 Action 。因为我们永远不应该改变状态,所以我返回一个全新的列表,只改变了那个单一的对象。但是因为整个列表是一个新的列表对象,表格组件会在每次更改时更新。这会导致应用运行非常缓慢。

刚刚看了官方todo app example并使用 Perf 插件检查它。意识到他们还会在每次更改时重新呈现整个待办事项列表(标记为已完成,取消标记)。我应该如何解决这个问题?

最佳答案

影响列表渲染性能的最大因素是繁重的渲染周期和昂贵的 DOM 突变。确保您的列表项在重新呈现时尽可能高效。如果做得好,这将产生很大的不同。

您有几个直接的选择。

  1. 将您的行分解成它们自己的组件(如果尚未完成)并优化渲染和更新周期。

  2. 使用类似 react-virtualized 的库帮助列表/表格/网格性能。

关于javascript - React Redux 在单个对象属性更改时重新呈现整个列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38767455/

相关文章:

javascript - 强制 keydown 事件每个 keyCode 只触发一次

javascript - Node/ express /Nunjucks : TypeError: Cannot use 'in' operator to search for 'x' in 'y'

javascript - 我如何将数据存储在可从任何地方访问的 nextjs 中

javascript - 溢流体不起作用?

javascript - 在实现 toast 中设计通知/警报的简洁方法

reactjs - 如何正确设置对 React 组件的引用?

javascript - 使用错误和 helperText react Material UI 表单验证

javascript - redux.js 中的 fetch(url) 使用错误的端口

javascript - 单击全选按钮后检查/取消选中复选框的 reducer 功能 -redux React

javascript - 如何在 redux 中替换对象属性值