react的React.memo缓存不生效解决

最新推荐文章于 2023-08-15 19:56:06 发布

它经不起推敲的

最新推荐文章于 2023-08-15 19:56:06 发布

阅读量536

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_46365130/article/details/130933709

版权

帮React.memo的内容放在Index外部，这样依赖的内容就只能通过props传过来，就不存在脏数据更新缓存组件的情况

const MembersInfo = React.memo((props: { membersInfos: DBUser.Document[], groupInfo: GroupInfo, setZIndex: Function, formatMessage: any }) => {
  const { membersInfos, groupInfo, setZIndex, formatMessage } = props;
  return (
    <div className={styles.scrollContainer}>
      <InfiniteScroll
        scrollableTarget="scrollableDiv"
        scrollThreshold={'90%'}
        dataLength={membersInfos.length}
        hasMore={false}
        next={() => {}}
        loader={buildLoadMore()}
      >
        {
          membersInfos.map((item, index) => {
            return <ListItem
              key={item.uid}
              item={item}
              groupInfo={groupInfo}
              membersInfo={membersInfos}
              setZIndex={setZIndex}
              formatMessage={formatMessage}
              index={index}
            />
          })
        }
      </InfiniteScroll>
    </div>
  );
})
export default function Index() {}