重复React高阶组件的缺点是什么？

Question

我们假设

1. 您有一个List组件，它会遍历10个帖子的列表，并为每个帖子调用Post组件。
2. 您希望使用React Router的Post高阶组件使每个withRouter组件可以使用当前路由：

例如：

const List = ({posts}) => {
  return <div>{posts.map(post => <Post post={post} />)}<div> 
}

有两种可能的模式：

1. 用Post包裹每个withRouter。
2. 用List包裹withRouter并将Router作为道具传递给Post。

第一种方法在逻辑上更有意义（withRouter与使用其prop的组件一起生活）但在虚拟DOM中产生10 withRouter个包装器。

这有什么缺点吗？也许从表现的角度来看？还是没事？

Answer 1

我没有任何基准可以引用，但史蒂夫麦克奎尔对性能和React进行了非常好的讨论。 https://youtu.be/5sETJs2_jwo?t=15m55s。我建议观看整个视频，因为他在超低功耗设备的背景下谈论了很多关于HOC和性能的内容。这里要说的是，它们在非常有限的设备上具有极高的性能目标，并且仍在使用大量的HOC。除非您渲染非常大的数据集，或者在您触发太多渲染的情况下执行某些操作，否则您应该可以将每个Post包装在withRouter中。

Answer 2

简而言之：按原样使用更高级别的组件可能会导致您更快地遇到性能问题，因此在遇到这些问题时，您需要做一些额外的工作来优化性能。

您的第一个选项的缺点是您将为每个列表项实例化一个额外的组件实例。根据列表的长度，您可能会更快地遇到性能问题。所以你想要做的是减少组件实例的数量，但不要放弃HoC给你的可用性。

现在安德鲁·克拉克已经给出了a great talk关于HoC＆＃以及他如何建造Recompose，它提供了公用事业＆＃34;壁球＆＃34; HoC使用其子组件，减少了组件实例的数量并提高了性能。正如他所提到的，如果你正在使用功能组件并且如果他们不能访问＆＃34; context＆＃34;则可以进行挤压。