reactjs - 何时以及如何在 React Hooks 和旧的 HOC props 传递之间进行选择？

Question

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

钩子(Hook)是一个令人惊奇的功能，但当我们过渡到它们时，我发现它们为依赖项提供了另一个入口，这更难管理，因为您必须查看实际的组件代码才能看到它。

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

(当前)决定哪个组件应该使用钩子(Hook)以及哪个组件应该使用渲染 Prop 的最佳实践是什么？

Answer 1

Hook 和 HOC 是不同的编程模型，比较它们就像比较橙子和苹果一样。

TL;DR

根据经验，当我想要对组件进行条件渲染时(如果条件:渲染 A，否则渲染 B)，我会使用 HOC，否则，我会使用钩子(Hook)。这只是我的意见。

优点和缺点:

HOC 优点

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

HOC 缺点

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

HOC 的优点和缺点

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

Hooks 优点

• 可读且声明性。
• 性能 - 仅在特定 Prop 发生更改时更新。
• 不断壮大的社区。

钩子(Hook)缺点

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