使用 Context API 与 CloneElement 来传递直接后代的 props

Question

所以，我有两个组件，一个组件始终是另一个组件的直系后代。我想将道具从父组件传递给子组件。可能有多个子组件。有两种方法可以实现它。

React.Children.map(children, (child) =>
  React.cloneElement(child, { someProp: 'value' })
)

或使用上下文 API

<Context.Provider value={{ someProp: 'value' }}>
  {this.props.children}
</Context.Provider>

两者都会产生相同的 DOM 结构，但是 Context API 的代码稍微多一些，并且会产生更多的 React 组件。

那么哪一款更注重性能，值得推荐。我找不到与此比较相关的任何讨论，因此在这里询问。

Answer 1

使用上下文 API 将数据传递给直系后代似乎有些过分了。

如果子级知道数据将从父级传递（这是通过使用 推测的<Context.Consumer>），它可以直接使用 render prop 模式，例如：

<Parent>{passedProps => <Child {...passedProps}/>}</Parent>

和

{children({ someProp: 'value' })};