帮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() {}
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐