渲染道具vs传递功能组件，哪个是首选？

Question

以下是React offical document关于渲染道具的用法：

<DataProvider render={data => <h1>Hello {data.target}</h1>} />

以下是它的实现：

render() {
  return <div>{this.props.render(this.state)}</div> ;
}

当我练习这个功能时，我突然意识到这种技术并不那么花哨，因为我们已经可以通过一个功能组件作为道具来实现相同的功能，例如：

render() {
  const { render: Render } = this.props
  return <div>{<Render {...this.state}>}</div> ;
}

更具可读性：

render() {
  const { RenderComponent } = this.props
  return <div>{<RenderComponent {...this.state}>}</div> ;
}

在我看来，<RenderComponent {...this.state}>看起来比this.props.render(this.state)更友好，因为前者使用JSX语法，每个初级React开发人员已经知道它是如何工作的，而后者是混乱的（组件中已经有另一个render()成员方法）。

我想在我的项目中使用功能组件版本，但我担心是否会出现任何问题。

题

哪种做法比另一种更好？ （包括利弊）

Answer 1

这里的事情是，在传递项目渲染器的情况下，您的组件需要处理渲染。使用渲染道具，您可以使任何组件处理子渲染并添加任何类型的渲染逻辑，而无需对组件进行任何更改。从架构这一观点更符合SOLID原则。