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

【问题标题】：React Native - Fetch api inside component on a FlatlistReact Native - 在 Flatlist 上的组件内获取 api
【发布时间】：2019-12-18 23:20:01
【问题描述】：

我正在创建一个包含 cmets 线程的应用程序（例如 reddit），而现在延迟确实很大。

真正简化的想法基本上是：

我有一个array，其 id 为 cmets [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>
}

电话的答案是评论的文本以及该评论的 cmets

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

我正在使用递归来渲染评论的 cmets，除了我在 <Flatlist /> 内渲染 <Flatlist /> 内 <Flatlist /> 内得到的荒谬延迟之外，一切正常...

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

其中一些线程有 3 位数的 cmets，我怎样才能以更智能的方式进行此操作？

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

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

【问题讨论】：

标签： react-native fetch react-native-flatlist

【解决方案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

【讨论】：

感谢您的回答，我的正在使用许多其他道具，例如 keyExtractor、initialNumberToRender、removeClippedSubviews、maxToRenderPerBatch、updateCellsBatchingPeriod，但在渲染 cmets 的第二个或第三个孩子之后，一切仍然变得非常滞后.为了简单起见，我删除了道具

【解决方案2】：

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

【讨论】：