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 を使用しましたが、まだうまくいきません。多くの再レンダリングが発生します。これを修正するのを手伝ってください。Tnz

4

1 に答える 1