4

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

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

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

4

2 回答 2

2

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

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

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

和

{children({ someProp: 'value' })};
于 2018-09-28T10:08:45.347 回答
0

新的 Context API 非常有趣，可以帮助我们处理 prop-drilling 并使渲染 props 模式的使用更加清晰，但是由于不必要的重新渲染，它带来了一些“性能问题”。事实上，这不是问题，因为 API 提供了一种处理这种不必要的重新渲染的方法。 如果这有帮助，请查看链接 并在上下文中优化性能 api

于 2018-09-28T10:03:23.400 回答