reactjs - React.cloneElement 内存效率

Question

如果我有的话，originalComponent 是否会被垃圾回收:

const WrapperComponent = ({ originalComponent, ...props }) => {
  const clone = React.cloneElement(originalComponent, props);
  return <div>{clone}</div>;
};

或者是否会导致组件重复？

Answer 1

使用React.cloneElement()不会导致内存效率低下。它使用原始元素作为基础创建一个新的 React 元素。与所有对象一样，除非在某个变量中保留对原始元素的引用，否则它将被垃圾收集并删除。

为了验证这一点，我使用 Chrome 开发工具内存快照分析器进行了快速测试。使用 WrapperComponent 渲染单个组件会导致内存中仅存在一个克隆组件实例。