何时以及如何选择React Hooks和旧HOC道具传递?

问题描述 投票:5回答:2

到目前为止,我们已经习惯了Flux流,其中数据通过道具输入到组件中。因此,您可以查看Props签名,看看组件要求是什么。

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

当然,我们只能在容器组件中使用Hooks,但我觉得他们的一些主要卖点是它们减少嵌套和HOC的能力。

决定哪个组件应该使用钩子哪个应该使用渲染道具的最佳实践(当前)是什么?

reactjs react-hooks
2个回答
5
投票

根据React FAQs钩子可以作为renderPropsHOCs的替代品,但可以与它们共存

通常,渲染道具和高阶组件只渲染一个孩子。我们认为Hooks是一种更简单的服务此用例的方法。两种模式仍然存在一个位置(例如,虚拟滚动组件可能具有renderItem prop,或者可视容器组件可能具有其自己的DOM结构)。但在大多数情况下,Hooks就足够了,可以帮助减少树中的嵌套。

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

钩子更难管理,因为你必须查看实际的组件代码才能看到它。

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


2
投票

钩子和HOC是不同的编程模型,比较它们似乎就像比较橙子和苹果。

TL; DR

根据经验,当我想要组件的条件渲染时(如果条件:渲染A,否则渲染B),我使用HOC,否则,我使用钩子。那只是我的意见。

优点缺点:

Hoks To

  • 轻松地将所有逻辑与UI组件分开(请参阅recompose)。
  • 易于撰写。
  • 在任何渲染之前操纵组件。

HOCs Cons

  • 名称冲突 - 2个HOC可以使用和设置具有相同名称的道具。
  • React dom是巨大的。
  • 父道具中的每一个变化都会导致孩子们重新渲染 - 这是React中的默认行为,但是当我们有许多HOC时,我们需要非常小心。
  • 类型 - 从组件的角度来看,很难理解我们得到的道具和类型。
  • 使用HOC会将所有道具传递给孩子,即使孩子需要来自特定HOC的只有支柱x
  • 使用依赖于组件的HOC道具的参数的过程可能很复杂

HOCs Pro&Con两者

  • 无需定义变量,只需用HOC包装,你就可以得到HOC提供的道具 - 这使我们的UI组件“猜测”道具的名称。

Hooks Pros

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

钩子缺点

  • 仅在组件内 - 这意味着无法通过传递的道具条件呈现组件。
  • 包含UI和逻辑的巨型组件文件。
© www.soinside.com 2019 - 2024. All rights reserved.