當元素被添加到陣列狀態時，本機FlatList會重新渲染-有解無憂

當我想更改陣列狀態時，FlatList 中的所有元素都會重新呈現。我已經檢查了具有相同問題的其他問題，但我無法解決它。首先，問題出在我的主專案中，但因為我無法解決它，所以我使用下面給出的示例創建了一個清晰的專案，但問題仍然存在。在主專案中，KeyExtractor 回傳一個唯一的 ID。

import React, { useEffect, useState, memo } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [data, setData] = useState([...Array(5).keys()])

  useEffect(() => {
    setInterval(() => {
      console.log("----------")
      setData(oldArray => [...oldArray, Math.ceil(Math.random() * 5000)])
    }, 2000)
  }, [])

  const RenderItem = memo(({ item }: { item: number }) => {
    return (
      <View>
        { console.log("render", item) }
        <Text>{ item }</Text>
      </View>
    )
  })

  const renderItemHandler = ({ item }: { item: number }) => {
    return <RenderItem item={item} />
  }

  const keyExtractor = (item: number) => item.toString();
  return (
    <View style={styles.container}>
      <FlatList
        style={{ width: 100, backgroundColor: "#7132a8" }}
        data={data}
        renderItem={renderItemHandler}
        keyExtractor={keyExtractor}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

當元素被添加到陣列狀態時，本機 FlatList 會重新渲染

更新

更新代碼以使用備忘錄

更新通過將使用備忘錄的組件移動到應用程式功能之外來解決它

const RenderItem = memo((props: { item: number }) => {
  return (
    <View key={props.item}>
      { console.log("render", props.item) }
      <Text>{ props.item }</Text>
    </View>
  )
})

const renderItemHandler = ({ item }: { item: number }) => {
  return <RenderItem item={item} />
}

export default function App() {....

uj5u.com熱心網友回復：

渲染呼叫將始終嘗試重新渲染組件的子組件。

如果您正在使用功能組件，您可以利用React.memo https://reactjs.org/docs/react-api.html#reactmemo來防止重新渲染子組件

或者shouldComponentUpdate對于舊學校類組件https://reactjs.org/docs/react-component.html#shouldcomponentupdate

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333481.html

標籤：安卓反应反应原生平单

上一篇：UseEffect多次重新渲染

下一篇：如何使包含svg的此跨度位于div旁邊