javascript - React 仅重新渲染网格中更改的元素

标签 javascript reactjs redux react-redux

我有一个矩形网格,其状态由 redux 管理。然而,当其中一个矩形的值通过增加一个值来更新时,整个网格将被重新渲染。我可以这么说,因为我在渲染周期中随机生成颜色,并且所有方 block 的颜色都发生了变化。但是,理想情况下,只有实际更新的方 block 才会重新渲染。

CODE SANDBOX

最佳答案

您应该对 ListItem 使用 PureComponent 并更新 ListItem 本身内部的卡片样式。这样,只有当相关的 redux-state 更新时,盒子才会一一更新。

https://codesandbox.io/s/n33k03yxkp

阅读 React 文档中的 PureComponent 和 shouldComponentUpdate() 函数:https://facebook.github.io/react/docs/react-api.html#react.purecomponent

关于javascript - React 仅重新渲染网格中更改的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46145257/

相关文章:

javascript - 在数组之间交换元素

javascript - jsx 中的奇怪条件渲染失败

android - 在 React Native 中设置 React-Native-Paper 组件的样式

javascript - prop `store.subscribe` 标记为必填

javascript - 在 Shopify Liquid 中使用 JavaScript 变量

javascript - 如何制作一个使用二进制搜索方法收缩字符串的 jQuery 函数?

javascript - 使用 Node Server SDK Opentok 时出现 token 错误

reactjs - 如何将react-autosuggest内部的值传递给父组件?

reactjs - 您可能忘记从定义它的文件中导出组件,或者您可能混淆了默认导入和命名导入

reactjs - react 在初始化期间返回未定义键 "mods"的切片缩减器。 (还原)