Reactjs呈现大量组件的速度很慢

Question

我有一个专门用来显示标签列表的页面。此标签列表的长度通常在10,000到20,000个标签之间。我使用以下组件呈现标记：

render() {
    return (
        <div>
            {this.state.tags.map((tag, i) =>
                <a key={i}>
                    <InlineTag>
                        {tag.name} ({tag.count})
                    </InlineTag>
                </a>
            )}
        </div>
    );
}

标签没有分页，因为即使是10,000个标签也只占用几页的垂直空间。

然而，它需要3-4秒来呈现标签，我想减少它。

有没有一种更优化的方式来呈现这些标签？

Answer 1

您可以将main标记分成块，然后创建一个组件来处理它。

例如，在10005的情况下，让我们有10个块，然后，我将循环1,000次，得到10个块，并一次性渲染所有这10个，然后我们可以用传统的方式渲染剩余部分

Answer 2

你可以首先加载100个标签，然后在后台调用所有标签，一旦其余的数据成功加载，页面上就会显示另外两个选项“加载所有标签”，你也可以添加一个分页，它不会每次都调用服务器，但会有1000个标签的数据，这些数据是在后台加载的。这样，您还可以添加一个选项来过滤标签:)