到目前为止,我们已经习惯了 Flux 流,其中数据通过 props 输入到组件中。因此,您可以查看 Props 签名并了解码件要求是什么。
钩子(Hook)是一个令人惊奇的功能,但当我们过渡到它们时,我发现它们为依赖项提供了另一个入口,这更难管理,因为您必须查看实际的组件代码才能看到它。
当然,我们只能在容器组件中使用 Hooks,但我觉得它们的一些主要卖点是减少嵌套和 HOC 的能力。
(当前)决定哪个组件应该使用钩子(Hook)以及哪个组件应该使用渲染 Prop 的最佳实践是什么?
最佳答案
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 发生更改时更新。
- 不断壮大的社区。li>
钩子(Hook)缺点
- 仅在组件内 - 这意味着无法通过传递的 props 条件来渲染组件。
- 包含 UI 和逻辑的巨型组件文件。
关于reactjs - 何时以及如何在 React Hooks 和旧的 HOC props 传递之间进行选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53387613/