Reactjs 忽略警告消息“VirtualizedList永远不应嵌套在纯滚动视图中”是一个好主意吗`

我是英语初学者

我试图在

react native

中使用flatList， 问题是我需要同时使用

ScrollView

和

flatList

，因为我显示了很多项目

所以我写的组件是这样的

import React, {useEffect, useState} from 'react';


const windowWidth = Dimensions.get('window').width;

const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return (
    layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom
  );
};

const BikeScreen = ({navigation}) => {
  const [renderDataCount, setRenderDataCount] = useState(10);

  const bikeList = useSelector((state) => state.productReducer.bikeList);
  const token = useSelector((state) => state.authReducer.token);

  const dispatch = useDispatch();

  

  useEffect(() => {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
  }, []);

  const stateChange = () => {
    setChildState(!childState);
  };

const renderItems = ({ item }) => (
    <IndividualProduct
      info={item}
      fav={true}
      stateChange={stateChange}
      setLoading={setLoading}
    />
  );

  return (
    <ScrollView
      onScroll={({nativeEvent}) => {
        if (isCloseToBottom(nativeEvent)) {
          if (renderDataCount + 4 < bikeList.length) {
            setRenderDataCount(renderDataCount + 4);
          } else if (renderDataCount + 1 < bikeList.length) {
            setRenderDataCount(renderDataCount + 1);
          }
        }
      }}
      scrollEventThrottle={400}>
      <Loader loading={loading} />

      {bikeList.length > 1 && (
        <FlatList
          data={bikeList}
          renderItem={renderItems}
          keyExtractor={(item) => item.name}
        />
      )}
    </ScrollView>
  );
};

export default BikeScreen;

import React，{useffect，useState}来自“React”；
const windowWidth=Dimensions.get（'window'）.width；
const isCloseToBottom=（{layoutMeasurement，contentOffset，contentSize}）=>{
常数paddingToBottom=20；
返回(
layoutMeasurement.height+contentOffset.y>=
contentSize.height-paddingToBottom
);
};
const BikeScreen=（{navigation}）=>{
const[renderDataCount，setRenderDataCount]=useState（10）；
const bikeList=useSelector（（state）=>state.productReducer.bikeList）；
const token=useSelector（（state）=>state.authReducer.token）；
const dispatch=usedpatch（）；
useffect（（）=>{
ignoreLogs（['VirtualizedList永远不应该嵌套']）；
}, []);
常量stateChange=（）=>{
setChildState（！childState）；
};
常量renderItems=（{item}）=>(
);
返回(
{
如果（isCloseToBottom（nativeEvent））{
if（renderDataCount+4
{bikeList.length>1&&(
item.name}
/>
)}
);
};
导出默认BikeScreen；

所以当我尝试同时使用

ScrollView

和

flatList

我得到了类似这样的错误日志

import React, {useEffect, useState} from 'react';


const windowWidth = Dimensions.get('window').width;

const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return (
    layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom
  );
};

const BikeScreen = ({navigation}) => {
  const [renderDataCount, setRenderDataCount] = useState(10);

  const bikeList = useSelector((state) => state.productReducer.bikeList);
  const token = useSelector((state) => state.authReducer.token);

  const dispatch = useDispatch();

  

  useEffect(() => {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
  }, []);

  const stateChange = () => {
    setChildState(!childState);
  };

const renderItems = ({ item }) => (
    <IndividualProduct
      info={item}
      fav={true}
      stateChange={stateChange}
      setLoading={setLoading}
    />
  );

  return (
    <ScrollView
      onScroll={({nativeEvent}) => {
        if (isCloseToBottom(nativeEvent)) {
          if (renderDataCount + 4 < bikeList.length) {
            setRenderDataCount(renderDataCount + 4);
          } else if (renderDataCount + 1 < bikeList.length) {
            setRenderDataCount(renderDataCount + 1);
          }
        }
      }}
      scrollEventThrottle={400}>
      <Loader loading={loading} />

      {bikeList.length > 1 && (
        <FlatList
          data={bikeList}
          renderItem={renderItems}
          keyExtractor={(item) => item.name}
        />
      )}
    </ScrollView>
  );
};

export default BikeScreen;

警告：虚拟化列表不应嵌套在纯滚动视图中

正如您在代码中看到的，我使用useEffect钩子忽略警告

问题是来自api的数据在bikelist中最多有400个条目 所以我很关心性能问题

我想知道的是，

忽略这个警告声明是个好主意吗？
这会影响我的应用程序性能吗？

为什么在纯滚动视图中嵌套VirtualizedList不好？

虚拟化列表，这意味着
例如，性能是否得到了优化，这意味着它们得到了极大的改进
使用它们渲染大型对象时的内存消耗和性能
内容列表。这种优化的工作方式是
呈现窗口中当前可见的内容，通常
表示设备的容器/屏幕。它还取代了所有
其他列表项大小相同的空白区域，并根据您的
滚动位置

现在，如果将这两个列表中的任何一个放在ScrollView中，它们都会失败
要计算当前窗口的大小，将尝试
渲染所有内容，可能会导致性能问题，它将
当然也会给你前面提到的警告

你能试着把它添加到外部吗