Question

在资源有限的设备中，通常的做法是利用组件池的性能。例如，有一个无尽的滚动列表。由于视口中始终显示大约10个组件，因此池中只能有20个组件实例。当用户向上或向下滚动时，顶部或底部的组件切换到另一侧并填充新数据。通过这种方式，用户感觉列表很长，但只需要20个组件实例。

使用jQuery和命令式编程，很容易实现这样的Component Pooling技巧。但是，在React世界中，UI是声明性的。

const List = ({listData}) => {
  return <ul>
    {listData.map(item => <li>{item}</li>);
  </ul>;
}

代码只声明有一个要显示的项目列表。我们的代码无法控制组件池;我相信React本身会创建DOM池。

那么，如何实现组件池以获得更好的性能呢？

Answer 1

React-Virtualized库是在React应用程序中使用的虚拟列表的首选实现。它经过了大量优化，我认为它使用了大量的ref和DOM交互来完成它需要做的事情。

那就是说，虽然我从未真正尝试在React（或其他地方，真的）实现虚拟列表或组件池，但我可以想象可能 em>沿着基本概念的正确路线。

对于此示例，我们获得了1000个项目的列表，但只想显示20.首先，您要在render中进行所有正确的分页和窗口化。让我们说用户已向下滚动了30个项目，因此我们要显示项目30-50。通常，当您在React中呈现项目列表时，您可以根据数据中的ID或作为后备数组索引为每个项目分配键。

通常情况下，使用数组索引作为键是不好的，因为改变内容会使React认为东西已被转移。而不是像你通常想要的那样安装和卸载组件，组件将保持挂载但突然接收一组不同的道具。但是，在这种情况下，这似乎是理想的行为。

所以，完全没有经过测试和假设，但模糊似乎合理的示例代码：

render() {
    const {items} = this.props;
    const {displaySize, startIndex} = this.state;

    const itemsToDisplay = items.slice(startIndex, startIndex + displaySize + 1);

    const renderedItems = itemsToDisplay.map( (item, index) => {
        return <ListItem item={item} key={index} />
    });

    return (
        <div>
            {renderedItems}
        </div>
    );
}

如何在React中进行组件池？

1 个答案: