当我创建更高阶的组件时，我应该如何“思考”？

Question

我正在努力弄清楚如何接近更高阶的组件。我得到它们的工作原理（我希望），但是一旦我开始编写代码，我就停在这里：

const HeadlineHOC = WrappedComponent => props => {
  if (props.articleHasArrived) {
    return <WrappedComponent { ...props } article={ props.article } />
  }
};

我也知道如何使返回类组件并添加状态而不是常规功能组件，但这几乎是完全相同的。我不能只创建一个类组件并在那里应用一个状态，而不是必须在创建HOC时做出额外的步骤吗？但是，在创建有用的高阶组件时，我可以获得这些内容。但是如果/ else条件使用正常的函数组件呈现而不需要将其作为HOC，那么你可以做到这一点。我已经阅读了大量的例子，大量的教程，大量的解释为什么高阶组件对他们的例子有好处。

问题是我只知道在他们的情况下，更高阶的组件是正确的。但是，我如何思考为我的组件创建有用的高阶组件？我怎样才能获得遇到问题的心态以及立即知道 HOC是唯一的方法呢？你们如何处理更高阶的组件作为一个解决问题的东西？

Answer 1

Dan Abramov可能在this Medium article中解释得最好。我会仔细阅读以了解为何以及如何使用＆＃39; 高阶组件＆＃39;