代码之家 › 专栏 › 技术社区 › johnnyodonnell

redux:更新列表中的一个项,而不更新依赖于该列表的所有其他组件

react-redux redux

johnnyodonnell · 技术社区 · 7 年前

我正在开发一个react/redux应用程序。假设我有一个组件从它的容器接收两个道具:

// NewsFeedItem.js
class NewsFeedItem extends React.Component {
  render() {
    const user = this.props.user;
    const item = this.props.item;
    return <p>{user.name} - {item.date}</p>;
  }
}

const mapStateToProps = (state) => ({
  user: state.user,
  item: state.user.items[0],
});

export default connect(mapStateToProps)(NewsFeedItem);

如果我更改了项目列表中的第2项或第3项,如何确保此组件不更新?

1 回复 | 直到 7 年前

markerikson 7 年前

为了完整起见,在我的答案中粘贴相关的redux问题:

首先,重新呈现react组件没有什么问题——这就是react的工作原理。如果组件使用相同的数据重新呈现并生成相同的呈现输出,那么react不会更新dom。现在,当然,这被认为是一个“浪费”的重新渲染,可能可以避免,但这只是一个问题,如果你试图认真优化性能。

第二:是的,如果您正确地不可变地更新状态,那么 state.user.items[3] 应该为 items 我是说, user ,和 state ,并通过 用户 作为这样一个部件的支撑将使其重新渲染。但是,在您的特定示例中,该组件仅使用 user.name 是的。所以没有理由把整个 用户 作为道具的物体-试着通过 name : state.user.name 相反。

第三,可以将用户属性及其关联项的存储拆分为状态的单独部分,这样对项的更新不会导致对关联用户对象的更新。见 Normalizing State Shape 以redux文档中的页面为例。

最后,您可以始终实现一个自定义 shouldComponentUpdate 在您的组件中,执行一个额外的检查,看看组件是否应该跳过重新呈现。

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

3 年前

universe11 · 对伊默来说,这是正确的还是错误的?

3 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

3 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

3 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

3 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

3 年前

geyser · React Redux toolkit-输入字段的状态管理

3 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

3 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

3 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

3 年前