React Native组件内外引入资源的性能差异及资源卸载问题

一、组件内vs组件外引入的性能差异 #

组件外引入（模块级） #

这种方式在模块加载阶段就执行require，生成资源ID并完成缓存，组件渲染时直接复用已存在的变量：

const img = require("img.png")

const Component = () => <Image src={img} />

• 优势：无需在组件渲染周期内重复执行require，没有额外函数调用开销，性能高效直接；写法简洁，资源引入逻辑与组件逻辑分离。

组件内引入（含useMemo） #

组件内引入分两种情况：

1. 不使用useMemo：每次组件渲染都会调用require("img.png")，虽然React Native会缓存同一资源的require结果，不会重复加载图片，但每次调用仍会产生微小的函数执行开销。
2. 使用useMemo：仅在组件首次渲染时执行一次require，后续重渲染复用缓存值，性能和组件外引入几乎无差异，但写法冗余：

const Component = () => {
 const img = useMemo(() => require("img.png"), [])

 return <Image src={img} />
}

结论：组件外引入的性能略优（更高效简洁），组件内用useMemo的性能接近但没必要多此一举，不用useMemo则存在不必要的重复调用开销。

二、组件外引入的图片资源会被卸载吗？ #

组件外通过模块级require引入的图片，不会随组件卸载而立刻被卸载：

• 模块级变量会一直存在于内存中，直到所在模块被JS引擎的垃圾回收机制标记为无用并回收，但React Native的打包机制通常不会轻易tree shake掉包含组件的模块。
• 图片的原生资源（如iOS的UIImage、Android的Bitmap）由React Native的图片缓存池管理，当系统内存不足时，缓存池会自动清理长时间未被使用的图片资源——不管资源是在组件内还是组件外引入的，最终都由系统的缓存策略决定是否释放。

简单来说：组件外引入的图片不会随组件卸载而立刻消失，会进入缓存池，待内存紧张时被自动回收。

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