在对象中存储React组件是否耗内存？存储数百个时情况如何？

首先要明确：你示例中存储的<Component />并不是实际的组件实例或DOM元素，而是React元素对象——JSX编译后的产物，本质是个描述组件结构的普通JS对象，单个占用内存极小。

关键细节拆解 #

• React元素的本质：JSX会被编译成类似这样的代码：

  React.createElement(Component, null, null)
  

  它返回的对象大概长这样：

  {
    type: Component,
    props: {},
    key: null,
    ref: null,
    // 其他内部标识属性
  }
  

  这类对象的体积非常小，只是组件的“描述符”，不包含组件的状态、DOM节点等重量级数据。
• 几百个元素的内存占用：即使存储几百个这样的元素对象，总内存开销也不会构成显著负担——除非你的组件props里携带了大量大型数据（比如几MB的数组、Blob对象、复杂嵌套结构），这时内存占用的大头是这些props数据，而非React元素本身。
• 和组件实例的区别：如果是存储组件实例（比如通过useRef获取的实例，或者手动创建的实例对象），那内存开销会大很多——实例包含组件的状态、生命周期钩子、DOM引用等内部数据，几百个实例可能会带来明显的内存压力，但你示例中的写法是存储React元素，不是实例。

实际业务中的注意事项 #

如果这些存储的元素对象长期驻留在内存中（比如保存在全局状态、未卸载的组件状态里），只要没有出现引用泄漏（比如被废弃的组件仍持有这些元素的引用），浏览器的垃圾回收机制会在它们不再被使用时自动回收。正常业务场景下，几百个React元素的内存占用完全可以忽略。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture