javascript - 当两个子组件相同且父组件在条件上不同时如何渲染

Question

我想知道当子组件在不同父组件中相同时，react 将如何渲染组件？

让我们说

render(){
  someFlag ? <div><MyComponent {...someprops} /></div> : <span><MyComponent {...someprops} /></span>
}

我认为很多 React 引用了 MyComponent 并使用不同的 props 提供相同的引用，因为它比创建组件的新实例更有效，请指导我如果 React 创建新实例将如何呈现这些更改实例是父组件不同还是我的想法是正确的？，我还是比较新的 react

Answer 1

这会导致性能问题。由于父元素在条件更改时从 div 更改为 span，反之亦然，React 将重构底层组件，即 MyComponent。

您可以阅读更多here .