避免使用 react-redux 重新渲染大量项目

IT技术 reactjs redux react-redux
2021-05-09 09:07:51

我正在为我的应用程序使用带有 react 和 typescript 的 redux。我正在处理在我的应用程序的不同位置使用的许多项目。我的状态是这样的：

{
    items: {42: {}, 53: {}, ... }, //A large dictionary of items
    itemPage1: {
        itemsId: [ 42, 34, 4 ],
        ...
    },
    itemPage2: { ... 
    },
    ...
}

用户可以修改items调度某些动作的某些属性。发生这种情况时，我需要重新绘制每个页面中已修改的组件。问题是我的项目非常大，我无法在每次小的修改时重新绘制所有项目。我想知道这种方法是否有效：

  • 我有一个<ItemPage1>连接到商店的拳头组件，以获取存储在树中的所有状态，itemPage1例如项目列表 id: itemsId。
  • 在内部<ItemPage1>，我遍历该itemsId属性以生成多个FilterItem组件：itemsId.map( itemId => return <FilterItem id=itemId>);

  • 最后，每个Item连接使用ownProps以获取状态的正确部分：

    const mapStateToItemProps = (state, ownProps) => {
    return {
        item: state.items[ownProps.id],
    }
}
const mapDispatchToItemProps = (dispatch, ownProps) => {
    return null;
}
const FilterItem = connect(
    mapStateToItemProps,
    mapDispatchToItemProps
)(Item)

您能否确认或反驳，如果我更新 id 42 的项目，那么只会重新渲染该项目？

2个回答

渲染大列表时，您需要考虑以下几点：

  • 减少需要渲染的 DOM 元素的总数（通过不渲染在屏幕上实际不可见的项目，也称为虚拟化）
  • 不要重新渲染没有改变的项目

基本上，您要避免的是在用户编辑一行时完全重新呈现您的列表（或您的页面）。这可以完全按照您的方式实现，即：通过仅将需要呈现的项目的 id 传递给列表容器，并使用 将这些 id 映射到connect每个组件ownProps。如果您有转储<Item/>组件，您的<ItemPage/>组件将创建连接的connect(<Item/>)组件。

这将起作用，如果您console.log('item rendered')在<Item/>组件类中放入 a ，您会注意到只有一个调用。

但是（这是一个很大的但是），在使用时不明显的react-redux是，如果状态的任何部分发生变化，所有依赖于它们的连接组件ownProps将始终重新渲染。在您的情况下，即使组件不会重新渲染，它们包装的组件也会！如果您有几十个项目，如果需要快速调度操作（例如在输入时输入），您可能会遇到一些延迟。如何避免这种情况？使用工厂函数作为初始props：<Item/>connect(Item)ownProps

const mapStateToItemProps = (_, initialProps) => (state) => {
    return {
        item: state.items[initialProps.id],  // we're not relying on the second parameters "ownProps" here, so the wrapper component will not rerender
    }
}
const mapDispatchToItemProps = (dispatch, ownProps) => {
    return null;
}
const FilterItem = connect(
    mapStateToItemProps,
    mapDispatchToItemProps
)(Item)

我建议你看看这个其他答案。

您可能还对这些优秀的幻灯片感兴趣：Big List High Performance React & Redux

最后，您应该明确地查看react-virtualized以执行列表的虚拟化（即，仅显示用户实际可以看到的项目）。

好的，我找到了这个讨论：https : //github.com/reactjs/redux/issues/1303

在底部清楚地说明（来自多个主角）：

[...] react-redux 解决了这个问题。它让你指定你关心的状态的特定部分，并在相关部分没有改变时注意避免更新 React 组件。

[...] 只是想完全了解这里发生了什么，所以如果 Redux 存储更新但一个特定的组件状态没有改变，Redux 不会触发该组件的 forceUpdate() 方法？[...]

React-Redux 的 connect() 函数生成的包装器组件会进行多项检查，以尽量减少实际组件必须重新渲染的次数。这包括 shouldComponentUpdate 的默认实现，并对进入组件的props（包括从 mapStateToProps 返回的内容）进行浅层相等性检查。所以是的，作为一般规则，连接组件只会在它从状态中提取的值发生变化时重新渲染。

所以我相信我的实现是好的，它不会重新渲染所有项目，因为只有一个项目会看到它的属性被修改。

其它你可能感兴趣的问题
上一篇用于身份验证的 nextjs 路由中间件 下一篇通用认证 Redux 和 React 路由器