将组件实例直接传递到prop或使用渲染回调？

Question

处理父组件要孩子呈现一些自定义JSX的情况的惯用和/或更有效的方法是什么？

• 渲染回调？
• 或将组件实例直接传递到prop中？

示例：

// Option 1
// -
const rightChild = <View />

<NavigationBar rightChild={rightChild} />

// Option 2
// -
const renderRightChild = () => <View />

<NavigationBar renderRightChild={rightChild}>

（为了简单起见，使用了lambda，我知道它对性能的影响）

Answer 1

此：

const rightChild = <View />
// ...
<NavigationBar rightChild={rightChild} />

...不是“将JSX传递给道具”。它正在传递一个组件实例。 JSX由const rightChild = <View />处理（转换为React.createElement调用），而 result （组件实例）存储在rightChild中。这很正常，尽管通常是孩子（结束于children道具）而不是单独的命名道具。但这两种方式都是道具，所以...

据我所知，这将是执行此操作的标准方法。

Answer 2

任何一种方法都可以。当您真正想要使用渲染道具时，就是需要从NavigationBar传递的道具来渲染组件或片段。传递组件的好处是您不必传递每次都会呈现的新函数。从性能的角度来看，不进行重新渲染会容易一些。