需求和内存消耗

Question

require("path/to/image") 是如何工作的？

对于这样的事情：

export const images = {
   image1: require("path/to/image-1"),
   image2: require("path/to/image-2"),
   ...
};

<Image source={images.image1} />

加载图像的 I/O 操作何时发生？在require 中声明的那一刻或分配给Image 组件的那一刻？

对于 I/O，我的意思是还从磁盘上可用的图像文件中读取字节。我试图了解做<Image source={require("path/to/image-1")} /> 与<Image source={images.image1} /> 的后果。我想知道 I/O（磁盘读取）是否已经在应用程序启动时发生，即甚至在特定屏幕中使用图像之前。

Answer 1

当您导入包含images 定义的文件时，文件的实际拉取发生。这是 I/O 发生的时间。但这就是它在服务器上的工作方式（如果您在服务器端渲染此组件）。如果您在客户端上执行此操作，path/to/image-1 和 path/to/image-2 可能已经在您捆绑的 JavaScript 文件中，因此没有 I/O 操作（或 http 请求）。

附： 如果您使用动态导入，图片看起来会有所不同，但据我所知，情况并非如此。

附言 实际上，现在当我看到您用 react-native 标记了您的问题时，我不得不说那里的情况可能看起来有所不同。