react-native：在平面列表中加载图像时内存增加答案

【问题标题】：react-native: memory increase when loading images in flatlistreact-native：在平面列表中加载图像时内存增加
【发布时间】：2021-03-30 20:25:06
【问题描述】：

我正在使用 FastImage 在我的 react 本机应用程序的平面列表中显示图像。图像尺寸为 512 x 512，每张图像大小约为 500kB。图像从服务器下载并放置在平面列表中。

我正在使用 xCode 的分配工具对此进行测试。

打开应用程序时，我达到了大约 20mb。但是一旦加载图像（只有 10 张图像），它的拍摄速度就高达 +250mb。

这很奇怪，因为这 10 张图片的总组合大小没有 250mb。

我的平面列表如下所示（简化）：

const Component = ({item, index}) => {
  return (
    <View>
      <FastImage source={{ uri: item.uri }} style={{ width: screenWidth, height: screenWidth }} />
    </View>
  );
};

const App = () => {
  const [images, setImages] = useState([]);

  const fetchData = () => {
    axios({
      method: 'get',
      url: 'serverURL'
    }).then(({data: { images }}) => {
      setImages(images);
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <FlatList
      data={images}
      keyExtractor={(item) => item.imageId.toString()}
      renderItem={({ item, index }) => <Component item={item} index={index} />}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={11}
      removeClippedSubviews={true}
    />
  );
};

【问题讨论】：

标签： react-native

【解决方案1】：

很有可能与这个道具有关：

renderItem={({ item, index }) => <Component item={item} index={index} />}

将其提取到（非内联）函数中，以更好地优化您的渲染。现在，React 正在为每个渲染上的每个列表项创建一个函数引用。

【讨论】：

感谢您的回答！你能帮我一个（简单的）sn-p（或链接）我应该如何将其更改为非内联函数吗？
当然。像const renderItem = ({ item, index }) => <Component item={item} index={index} /> 这样的东西，然后将其用作renderItem={renderItem}
谢谢！我试试看！