require加载图片的机制、I/O时机及两种写法差异问询

嘿，这个问题问到点子上了——React Native里图片require()的机制确实容易让人搞混，我来给你一步步拆解清楚：

1. require() 的执行时机与磁盘I/O操作 #

首先要明确：磁盘读取图片字节的I/O操作，是在应用打包阶段就完成的，而不是运行时（无论是require声明时，还是Image组件渲染时）。

React Native的打包工具（比如Metro）会在打包过程中对所有require()引用的图片做静态分析：

• 它会找到对应的图片文件，将其处理为平台兼容的资源格式（比如iOS的Assets Catalog、Android的drawable资源）；
• 然后给每个图片分配一个唯一的资源ID，require("path/to/image")这个调用在运行时实际返回的就是这个资源ID（一个数字或平台特定的对象），而不是图片的原始字节流。

也就是说，你写require的时候，运行时根本不会去读磁盘——因为磁盘读取已经在打包时做完了，运行时只是拿到一个预先生成的资源标识而已。

2. 两种写法的差异：直接写require vs 存入对象复用 #

咱们对比你提到的两种写法：

• <Image source={require("path/to/image-1")} />：每次渲染这个组件时，都是直接引用打包阶段生成的资源ID。因为require()的结果在打包时就固定了，运行时只是读取这个预存的ID，没有额外的开销。
• <Image source={images.image1} />：这里的images.image1是你提前把require()返回的资源ID存在了一个对象里。本质上和第一种写法完全等价——require()的解析（拿到资源ID）在模块加载时（APP启动初期，模块同步加载）就完成了，你只是把这个ID存起来方便复用而已，代码结构更整洁，尤其在需要多次引用同一张图片时更实用。

两种写法在性能、资源加载时机上没有任何区别，只是代码组织方式的不同。

3. 应用启动时的资源加载情况 #

刚才说了，require()在APP启动时会被解析为资源ID，但这并不意味着图片会在启动时就加载到内存。实际上：

• 资源ID只是一个指向APP包内资源的标识，系统的资源管理器会在Image组件首次渲染时，才会根据这个ID去把对应的图片从磁盘加载到内存中（或者从系统缓存中读取）；
• 除非你主动做了预加载操作，否则APP启动时不会把所有图片都加载到内存，这样能节省启动时间和内存占用。

内容的提问来源于stack exchange，提问作者Pablo Espantoso