什么时候以及如何在React Hooks和旧的HOC道具之间进行选择？

Question

直到现在，我们还习惯于通过道具将数据输入组件的Flux流。因此，您可以查看Props签名并查看组件要求是什么。

钩子是一个了不起的功能，但是当我们过渡到它们时，我发现它们为依赖关系提供了另一个入口，这很难管理，因为您必须查看实际的组件代码才能看到它。

当然，我们只能在容器组件中使用Hook，但是我认为它们的一些主要卖点是它们减少嵌套和HOC的能力。

（目前）确定哪个组件应该使用挂钩以及哪个组件应该使用渲染道具的最佳实践是什么？

Answer 1

根据反应常见问题解答挂钩，它们可以用作renderProps和HOCs的替代品，但可以与它们共存

  

通常，渲染道具和高阶组件仅渲染一个   儿童。我们认为，挂钩是服务此用例的更简单方法。 有   仍然是两种模式的地方（例如，虚拟滚动条   组件可能具有renderItem属性或可视容器   组件可能具有其自己的DOM结构）。但是在大多数情况下，Hooks   足够了，可以帮助减少树中的嵌套。

钩子允许功能组件中的状态逻辑，并且类似于React中的类组件。

  

由于必须查看实际情况，因此很难管理钩子   要查看的组件代码。

并非如此，因为您可以在自定义钩子中提取HOC或renderProps中的自定义逻辑，并查找其实现，而不是了解实际组件中的实际情况。

Answer 2

Hook和HOC是不同的编程模型，将它们进行比较似乎就像在比较橙子和苹果。

TL; DR

根据经验，当我想要有条件地渲染组件时（如果条件：渲染A，否则渲染B），我会使用HOC，否则，我会使用钩子。 那只是我的意见。

优点和缺点：

HOC专家

• 轻松地将所有逻辑与UI组件分离（请参见recompose）。
• 易于撰写。
• 在渲染前操作。

HOC缺点

• 名称冲突-2个HOC可以使用和设置具有相同名称的道具。
• 反应堆是巨大的。
• 父项道具的每次更改都会导致子项重新渲染-这是React中的默认行为，但是当我们有很多HOC时，我们需要非常小心。
• 类型-从组件的角度来看，很难理解我们正在获得哪些道具和类型。
• 使用HOC会将所有道具传递给孩子，即使孩子从该特定HOC中只需要道具x。
• 使用依赖于组件道具的参数进行HOC的过程可能很复杂

HOCs Pro＆Con都

• 无需定义变量，只需用HOC包装即可，您将获得HOC提供的道具-这使我们的UI组件“猜测”道具的名称。

吸引专业人士

• 可读且声明性的。
• 性能-仅在更改特定道具时更新。
• 成长中的社区。

挂钩缺点

• 仅在组件内-这意味着无法通过传递的道具条件来渲染组件。
• 完全包含UI和逻辑的巨型组件文件。

Answer 3

我经常看到的一件事是在组件中使用带有副作用的钩子。这使您的组件更难测试，对于钩子恕我直言也不是一个好用例。

例如，您创建了一个具有自定义const {data, loading, error} = useFetch(endpointUrl)的组件，然后直接在同一组件的渲染部分return <>{data.name}</>中使用它。

对我来说，这仍然是HOC的用例。将数据加载到HOC中，并将其作为属性提供给静态转储组件。这样，您可以更轻松地测试组件，并且仍然可以分离问题。