javascript - 当我创建高阶组件时,我应该如何处理 "think"?

标签 javascript reactjs

我正在尝试找出如何处理更高阶组件的噩梦。我知道它们是如何工作的(我希望如此),但是一旦我开始编写代码,我就会停在这里:

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

我还知道如何使其返回一个类组件并添加一个状态而不是常规功能组件,但这几乎是完全相同的事情。难道我不能只创建一个类组件并在那里应用一个状态,而不必在创建 HOC 时执行额外的步骤吗?但这与我在创建有用的高阶组件时所能得到的一样有用。但你可以使用普通的函数组件来执行 if/else 条件渲染,而不需要将其设为 HOC,这是一个错误。我读过大量的例子,大量的教程,大量的解释为什么高阶组件适合他们的例子。

问题是我只知道在他们的情况下使用更高阶的组件是正确的做法。但是我如何考虑为我的组件创建有用的高阶组件呢?我怎样才能获得遇到问题并立即知道 HOC 是解决问题的唯一方法的心态?你们如何将高阶组件作为解决问题的方法?

最佳答案

丹·阿布拉莫夫 (Dan Abramov) 可能在 this Medium article 中对此做了最好的解释。 。我会通读本文以了解为什么以及如何使用“高阶组件”

关于javascript - 当我创建高阶组件时,我应该如何处理 "think"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45156397/

相关文章:

javascript - 按 ENTER 切换 HTML 标签

javascript - 使用 JavaScript 执行带有参数的操作 Controller 的最佳方法是什么?

javascript - 打开站点时如何查看 javascript 正在逐步执行的操作?

reactjs - 如何在单击按钮时使用 ReactJS 将行添加到表中

javascript - 展开 折叠 div

javascript - 单击同一页面中的链接时如何打开 Accordion 的一部分

JavaScript/React 根据第一个字段自动填充其他字段

javascript - 为什么 cancelledPromise 模式被认为比 React 中的 isMounted() "antipattern"更好?

javascript - 如何从 React 访问样式?

javascript - 为什么允许使用 kebab-case 非标准属性,而不允许使用其他属性?以及如何在 TypeScript 中定义这样的类型?