0

我正在处理一个包含导致昂贵重新渲染的复杂子级的平面列表，我需要对其进行优化，但我无法使用 useMemo 停止重新渲染，请帮助我完成此操作。

这是我的列表代码：

          <FlatList
            data={thePosts}
            extraData={thePosts}
            keyExtractor={(item, index) => index.toString()}
            removeClippedSubviews={true}
            maxToRenderPerBatch={5}
            updateCellsBatchingPeriod={30}
            initialNumToRender={11}
            windowSize={5}
            refreshing={isRefreshing}
            onRefresh={handleOnRefresh}
            onEndReached={isLoading ? () => null : () => getPosts("more")}
            onEndReachedThreshold={0.1}
            renderItem={memoizedPost}
            //renderItem={renderThePost}
            ItemSeparatorComponent={renderThePostSep}
            ListFooterComponent={renderThePostListFooter}
          />

这里是renderPost：

  const renderThePost = (props) => {
    let post = props.item;

    if (post[0].type == "share") {
      return (
        <TheSharedPost thePost={post} />
      );
    } else {
      return <ThePost thePost={post} />;
    }
  };

我试过像这样使用记忆：

  const memoizedPost = useMemo(() => renderThePost, []);

现在的问题是，空数组作为 useMemo 参数我认为只接受第一个渲染但不起作用，我尝试使用[item.someProperty]但我无法识别参数中的项目（项目未定义）

我也使用过 useCallback 但仍然没有运气，发生了很多重新渲染。请帮我解决这个问题。总氮

4

1 回答 1

1

您可以使用React.memo来避免呈现平面列表项

function TheSharedPost(props) {
  /* render using props */
}

export default React.memo(TheSharedPost);

function ThePost(props) {
  /* render using props */
}

export default React.memo(ThePost);
于 2020-12-17T13:27:05.780 回答