reactjs - 如何向 FlatList 添加新数据。 ( native react )

Question

我用这个方法向FlatList添加新数据

const [message, setMessage] = useState([/* Data */])

<FlatList
  data = {message}
  renderItem = {renderItem}
  keyExtractor = {keyExtractor}
/>

 setMessage((pre) => [/* new data */, ...pre])

当我向它添加新数据时，它会呈现列表中的所有元素。这会降低应用程序性能。

它是实时应用程序。假设它有 20 个元素。所以它每次都会渲染昂贵的元素。添加或删除数据时。我不是专家。有事打电话extradata .

Answer 1

FlatList 是 prop 驱动的。 像所有 React 组件一样，当 props 改变时 - 组件将重新渲染 () 本身。 FlatList 完全按照设计的方式工作。

可以优化 FlatList 渲染:

• 初始渲染数
• getItemLayout()
• renderItem()
• shouldComponentUpdate() 用于 renderItem() 中使用的组件

调整 renderItem() 中使用的组件，使其仅在绝对必要时通过生命周期方法(如 shouldComponentUpdate())呈现。

如果您想要更好的 FlatList 性能，则需要根据您的具体用例进行调整。 https://reactnative.dev/docs/optimizing-flatlist-configuration