首页 > 解决方案 > 可以有条件地渲染多个 InfiniteLoader 组件吗?

问题描述

该应用程序具有选项卡来选择要查看的帖子列表。有条件地渲染多个 InfiniteLoader 组件是否可行?还是性能成本太大?我应该只有一个 InfiniteLoader 组件并在适当的列表中提供吗?InfiniteList 只是一个智能包装 InfiniteLoader。

const renderContent = () => {
    switch (tab) {
      case "posts":
        return (
          <InfiniteList
            getDataFromServer={(startIndex, stopIndex) =>
              fetchPostsByUsername({
                username: query.username,
                userId: user.id,
                startIndex,
                stopIndex,
              })
            }
            list={posts}
            updateList={(posts) => setPosts(posts)}
            infiniteLoaderRef={postsLoaderRef}
            empty={renderEmpty()}
          >
            <Post user={user} />
          </InfiniteList>
        );

      case "media":
        return (
          <InfiniteList
            getDataFromServer={(startIndex, stopIndex) =>
              fetchMediaPostsByUsername({
                username: query.username,
                userId: user.id,
                startIndex,
                stopIndex,
              })
            }
            list={mediaPosts}
            updateList={(mediaPosts) => setMediaPosts(mediaPosts)}
            infiniteLoaderRef={mediaPostsLoaderRef}
            empty={renderEmpty()}
          >
            <Post user={user} />
          </InfiniteList>
        );

      case "likes":
        return (
          <InfiniteList
            getDataFromServer={(startIndex, stopIndex) =>
              fetchLikedPostsByUsername({
                username: query.username,
                userId: user.id,
                startIndex,
                stopIndex,
              })
            }
            list={likedPosts}
            updateList={(likedPosts) => setLikedPosts(likedPosts)}
            infiniteLoaderRef={likedPostsLoaderRef}
            empty={renderEmpty()}
          >
            <Post user={user} />
          </InfiniteList>
        );

      default:
        return null;
    }
};

标签: reactjsperformancereact-virtualized

解决方案


推荐阅读