我正在为我的应用程序使用带有React和Typescript的redux。我正在处理应用程序不同地方使用的许多项目。我的状态如下所示:
{ items: {42: {}, 53: {}, ... }, //A large dictionary of items itemPage1: { itemsId: [ 42, 34, 4 ], ... }, itemPage2: { ... }, ... }
用户可以修改items调度的某些操作的某些属性。发生这种情况时,我需要重绘每页中已修改的组件。问题是我的物品很大,每次修改时我都无法重绘所有物品。我想知道这种方法是否行得通:
items
<ItemPage1>
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的项目,那么只有该项目将被重新渲染?
呈现大列表时,您需要考虑以下几点:
基本上,您要避免的是当用户编辑一行时完全重新呈现列表(或页面)。这可以完全按照您的操作来实现,即:通过仅将需要呈现的项的id传递到列表容器,并connect通过使用将这些ID映射到每个组件ownProps。如果您有转储<Item/>组件,则<ItemPage/>组件将创建连接的connect(<Item/>)组件。
connect
<Item/>
<ItemPage/>
connect(<Item/>)
这将起作用,如果您console.log('item rendered')在<Item/>组件类中添加了一个,您将注意到只有一个调用。
console.log('item rendered')
但是 (但很大),使用时并不明显的react-redux是,如果 状态的任何部分发生变化 ,则依赖于它们的所有连接组件ownProps将 始终重新 呈现 。在您的情况下,即使<Item/>不重新渲染组件,它们的包装组件connect(Item)也会!如果您有几十个项目,那么在需要快速分派操作时(例如,在输入中键入内容时),可能会遇到一些延迟。如何避免呢?使用工厂函数ownProps作为初始道具:
react-redux
connect(Item)
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)
您可能也对这些出色的幻灯片感兴趣:大列表高性能React和Redux
最后,您应该确定要进行反应虚拟化以执行列表的虚拟化(即,仅显示用户实际可以看到的项目)。