14

到目前为止，我们习惯于 Flux 流，数据通过 props 进入组件。因此，您可以查看 Props 签名并了解组件要求是什么。

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

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

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

4

3 回答 3

6

Hooks 和 HOCs 是不同的编程模型，比较它们就像比较橘子和苹果。

TL;博士

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

优点缺点：

HOC 优点

  • 轻松地将所有逻辑从 UI 组件中分离出来（请参阅recompose）。
  • 容易作曲。
  • 在任何渲染之前操作组件。

HOC 缺点

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

HOCs Pro & Con 两者

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

钩子优点

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

钩子缺点

  • 仅在组件内 - 这意味着无法通过传递的道具条件渲染组件。
  • 完全包含 UI 和逻辑的巨型组件文件。
于 2019-04-14T15:10:12.373 回答
5

根据React 常见问题解答，钩子可以用作 and 的替代品renderProps，HOCs但可以与它们共存

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

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

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

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

于 2018-11-20T06:54:58.953 回答
1

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

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

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

于 2019-08-02T06:33:32.333 回答