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

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

react-redux redux

1

johnnyodonnell · 技术社区 · 8 年前

我正在开发一个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 回复 | 直到 8 年前

1

markerikson 8 年前

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

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

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

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

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