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}
/>

另请参阅performance-issues-with-react-native-flatlist-with-100-list-items

Answer 2

我简直不敢相信，这个问题三天了，解决方案必须是迄今为止React Native中最奇怪的事情，我只是从Views中删除了borderRadius，现在一切都非常完美，任何人都知道为什么borderRadius会产生这样的滞后吗？

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

2 个答案: