使用 Context API 与 CloneElement 为直接后代传递道具答案

【问题标题】：Use of Context API vs CloneElement for passing down props for direct descendent使用 Context API 与 CloneElement 为直接后代传递道具
【发布时间】：2019-03-04 07:07:09
【问题描述】：

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

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 组件。

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

【问题讨论】：

标签： javascript reactjs performance react-context

【解决方案1】：

使用上下文 API 将数据传递给直接后代似乎有点过头了。

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

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

和

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

【讨论】：

多个孩子怎么样？对多个孩子使用 Context API 是否仍然过大？
没有什么不同。您可以让父级支持多个渲染道具（children 可以是一个函数或函数数组），或者更好的是，将子级放入单个渲染道具<Parent>{passedProps => <><Child {...passedProps}/><Child {...passedProps}/></>}</Parent>
这个答案没有解决提议的场景
@Danielo515 怎么样？这正是帖子显示的内容，“所以，我有两个组件，一个总是另一个的直系后代。我想将 props 从父组件传递给子组件”。如果您有类似的案例在某些方面有所不同，因此无法通过这种方式解决，请考虑提出一个新问题。
问题是关于如何将props“注入”到children中，以便您可以正常使用组件，嵌套它们。您的解决方案只是让父组件每次都使用子组件，这是一个完全不同的 API

【解决方案2】：

新的 Context API 确实很有趣，可以帮助我们处理 prop-drilling 并使渲染 props 模式的使用更加清晰，但是由于不必要的重新渲染，它带来了一些“性能问题”。事实上，这不是问题，因为 API 提供了一种处理这种不必要的重新渲染的方法。 see link if this helps 和optimizing-performance-in-context api

【讨论】：