React Native - 在 Flatlist 上获取 api 内部组件

Question

我正在创建一个有评论线程的应用程序（比如 reddit），现在延迟真的很大。

真正简化的思路基本上是：

我有一个 array 评论的 id [01, 02, 03, n]

<ParentComponent>
  <Flatlist 
    data={array}
    renderItem={(commentId) => <CommentComponent commentId={commentId} />}
  />
</ParentComponent>

在内部 <CommentComponent /> 我正在使用 ID 发出请求并获取要呈现的内容

const CommentComponent = ({ commentId }) => {
  const [comment, setComment] = React.useState({});

  useEffect(() => {
    const c = getComment(commentId)
    setComment(c)
  })

  return (
    <View>
      <Text>{comment.text} />
      <Flatlist 
       data={comment.arrayComments}
       renderItem={(commentId) => <CommentComponent commentId={commentId} />}
      />
    </View>
}

电话的答案是评论的文本以及对此评论的评论

{
  text: 'Lorem ipsum',
  comments: [05, 06, 07, 08, n]
}

我正在使用递归来呈现评论的评论，一切正常，除了我在 <Flatlist /> 中呈现 <Flatlist /> 中的 <Flatlist /> 时出现的荒谬滞后] ...

并且 <Flatlist /> 中的每个项目都需要调用渲染，所以我得到了荒谬的渲染数量

有些帖子有 3 位数的评论，我怎样才能更聪明地做到这一点？

我想我必须在每个 <CommentComponent /> 之外进行一次抓取，但是获取所有这些评论可能需要很长时间，而且感觉不对。

任何人都知道如何在滚动时不出现这种荒谬的延迟来完成这项工作？

Answer 1

您应该在用户滚动到项目时呈现项目。请阅读 optimize-flatlist 简化

请使用

 <Flatlist 
   keyExtractor={(item,index) => index.toString()} // don't forget keyExtractor
   initialNumToRender={10} // Vary According to your screen size take a lumsum according to your item height
   removeClippedSubviews={true}
/>

另读

Answer 2

我简直不敢相信，遇到这个问题 3 天了，解决方案必须是 React Native 中迄今为止最奇怪的事情，我刚刚从视图中删除了 borderRadius，现在一切都很完美，任何人都有知道为什么 borderRadius 会造成这样的滞后吗？

React Native - 在 Flatlist 上获取 api 内部组件

React Native - Fetch api inside component on a Flatlist

fetch

react-native

react-native-flatlist