何时使用组件实例而不是组件

Question

渲染组件和组件实例之间，除了再次调用函数(生成组件(之外，还有什么区别吗？

考虑一下这个片段：

// component.jsx
function Foo() { return <div/> }
function Bar() { return <div><Foo /></div> }
// component-instance.jsx
const icon = <Foo />
function Foo() { return <div/> }
function Bar() { return <div>{fooInstance}</div> }

我认为这两者之间可能存在性能差异，尤其是在经常渲染(调用(Bar的情况下。

Answer 1

首先，您所调用的组件实例通常被称为React Element。

使用元素而不是组件的唯一缺点是无法更新其道具。

不调用函数来生成元素所带来的性能增益是可以忽略的，您不应该在这里进行优化。