将 React 组件作为 props 传递给另一个组件时带和不带结束标记的区别

Question

我试图找出在 React 中将一个组件传递给另一个带有和不带有闭合标签的组件之间的区别。这是语法。

<div className="App">
    <RegularList list={smallList} comp={SmallList}/>
 </div>

和

<div className="App">
    <RegularList list={smallList} comp={<SmallList/>}/>
 </div>

Answer 1

在 React 中，将一个组件传递给另一个带有和不带结束标记的组件会影响组件的渲染方式。

当你传递一个组件而不关闭标签作为 prop 时，这意味着你正在传递对该组件的引用。这意味着该组件不会立即渲染，而是将其引用传递给父组件，并在需要时渲染。

另一方面，当您传递带有结束标记的组件作为 prop 时，您传递的是该组件的实际实例。这意味着该组件将立即呈现，其输出将传递给父组件。

所以在您提供的示例中，当您将带有结束标记的

<SmallList/>

作为道具传递给

RegularList

组件时，它将创建一个

SmallList

组件的实例并立即呈现它。而当你传递

SmallList

而没有关闭标签作为 prop 时，它将传递对

SmallList

组件的引用，并在需要时进行渲染。

在大多数情况下，首选传递组件而不关闭标签，因为它通过避免不必要的渲染来实现更好的性能。但是，在某些情况下可能需要传递带有结束标记的组件，例如当您需要将 props 传递给组件时。