Flatlist 重新渲染：VirtualizedList：你有一個更新慢的大列表

Question

我正在使用功能組件來呈現平面列表，當列表需要重新呈現時，它的效率很低。 我試圖更好地格式化代碼並實現 React.memo、useMemo、useCallback，但我一直失敗。 我以為我在這里實現了 React.memo 但我一定做錯了什么，因為我仍然在終端收到警告“你有一個很慢的大列表..”

任何幫助實施適當的方法以防止不必要的重新渲染將不勝感激。

const MemoRender = React.memo(() => {



  const renderItem = ({item, index}) => {
  
    return (
      <HStack space={2}>
      <Center >
   
                <Text >
                
                  {'Serial : '}
                  {item.Serial}
                </Text>
               
                <Text>
                  {'Type : '}
                  {item.Type}
                </Text>
                </Center>
                <Center >
                <Text>
                  {'Brand : '}
                  {item.Brand}
                </Text>
                <Text>
                  {'Model : '}
                  {item.Model}
                  
                </Text>
                <Text>
                  {'Room : '}
                  {item.Room}
                  
                </Text>
                </Center>
                <Center>
                <Button transparent icon onPress={() => editUser(item)}>
                  <Icon as={Ionicons}  active name="create" />
                </Button>
                <Button transparent onPress={() => deleteUser(item)}>
                  <Icon as={Ionicons} active name="trash" />
                </Button>
                </Center>
                </HStack>
    );
  };
  const memoizedValue = useMemo(() => renderItem, [users]);
  

  const [page,setPage] = useState(1);
  const [users, setUsers] = useState([]);
  const fetchMoreData = () => {
    setPage((prev) => prev + 1);
}

useEffect(() => {
    
  console.log('mounted');
  
  //const userRef = firebase.database().ref('/users');
  const userRef = firebase.database().ref('/users' + '/C Room');
  const OnLoadingListener = userRef.on('value', (snapshot) => {
    //setUsers([]);
    const list = [];
    snapshot.forEach(function (childSnapshot) {
      list.push(childSnapshot.val());
    });
    setUsers(list);
  });
  

  
  const childRemovedListener = userRef.on('child_removed', (snapshot) => {
    // Set Your Functioanlity Whatever you want.
    //alert('Child Removed');
  });

  const childChangedListener = userRef.on('child_changed', (snapshot) => {
    // Set Your Functioanlity Whatever you want.
   // alert('Child Updated/Changed');
  });

  return () => {
    userRef.off('value', OnLoadingListener);
    console.log('unmounting...');
   
    //userRef.off('child_removed', childRemovedListener);
   // userRef.off('child_changed', childChangedListener);
  };
}, []);


useEffect(()=> {
  if(page){

  }
},[page]);
const deleteUser = (Item) => {
  firebase.database()
    .ref('users/' + '/C Room'+ '/' + Item.Id)
    .remove()
    .then(() => {})
    .catch((err) => {
      console.log(err);
    });
};


const deleteAllUsers = () => {
  firebase.database()
     .ref('users')
     .remove()
     .then(() => {
       setUsers([]);
     });
 };


return (
 
   
  <FlatList 
  data={users}
  style={styles.scrollView}
  renderItem={memoizedValue}
  keyExtractor={(item,index) => index.toString()}
  extraData={users}
  onEndReachedThreshold={0.3}
  onEndReached={fetchMoreData}
  
  contentContainerStyle={{padding: 5,backgroundColor: "green"}}
  getItemLayout={(_, index) => ({
    length: 60 + 20, //  WIDTH + (MARGIN_HORIZONTAL * 2)
    offset: (60 + 20) * (index),  //  ( WIDTH + (MARGIN_HORIZONTAL*2) ) * (index)
    index,})}

      
  />

)

}, [])

Answer 1

Shopify 剛剛發布了新的 package，它實現了虛擬化列表並以更好的性能取代了 FlatList。 它遵循優化的最佳實踐。 請查看並測試： https://shopify.github.io/flash-list/