Question

我正在研究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);

如果我更改了项目列表中的第二项或第三项，如何确保该组件不会更新？

Answer 1

出于相关完整性，在我的相关Redux问题中回答我：

首先，React组件重新渲染没有任何问题-这就是React最初的工作方式。如果一个组件使用相同的数据重新渲染并产生相同的渲染输出，则React不会更新DOM。现在，可以肯定的是，这被认为是“浪费”的重新渲染，可以避免，但是如果您要认真优化性能，这只是一个问题。

第二：是的，如果您正确地一成不变地更新了状态，那么对state.user.items[3]的更新将导致对items，user和state的引用，并将user作为道具传递给将这样的组件，会导致其重新呈现。但是，在您的特定示例中，该组件仅使用user.name。因此没有理由将整个user对象作为道具传递-尝试仅传递name : state.user.name。

第三，您可以将用户属性及其相关项目的存储分为状态的不同部分，以便对项目的更新不会导致对相关用户对象的更新。作为示例，请参见Redux文档中的Normalizing State Shape页面。

最后，您始终可以在组件中实现自定义shouldComponentUpdate，并在那里进行其他检查以查看组件是否应跳过重新渲染。

Redux：更新列表中的一项，而不更新依赖于该列表的所有其他组件

1 个答案: