React 原生 flatlist 重新渲染答案

【问题标题】：React native flatlist rerenderReact 原生 flatlist 重新渲染
【发布时间】：2020-12-17 09:54:57
【问题描述】：

我正在处理一个包含复杂子项的平面列表，这会导致昂贵的重新渲染，我需要对其进行优化，但我无法使用 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 但仍然没有运气，发生了很多重新渲染。请帮我解决这个问题。总价

【问题讨论】：

标签： react-native react-native-flatlist flatlist

【解决方案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);

【讨论】：