javascript - 使用 Context API 与 CloneElement 传递直接后代的 Prop

Question

所以，我有两个组件，一个总是将成为另一个的直接后代。我想将 Prop 从父组件传递给 child 。可能有不止一个子组件。有两种方法可以实现。

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 的使用对于将数据传递给直系后代来说似乎有点矫枉过正。

如果一个 child 知道数据将从父传递(这是通过使用 <Context.Consumer> 假定的)，它可以直接使用 render prop 模式，例如:

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

和

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