reactjs - 何时以及如何在 React Hooks 和旧的 HOC 道具传递之间进行选择?
问题描述
到目前为止,我们习惯于 Flux 流,数据通过 props 进入组件。因此,您可以查看 Props 签名并了解组件要求是什么。
Hooks 是一个了不起的功能,但是当我们过渡到它们时,我发现它们为依赖项提供了另一个入口,这更难管理,因为您必须查看实际的组件代码才能看到它。
当然,我们只能在容器组件中使用 Hooks,但我觉得它们的一些主要卖点是它们能够减少嵌套和 HOC。
决定哪个组件应该使用钩子以及哪个应该使用渲染道具的最佳实践(当前)是什么?
解决方案
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 和逻辑的巨型组件文件。
推荐阅读
- swift - 如何根据需要根据图像的类别从 Firebase 存储中检索图像
- android - 相对布局在 Android Studio 中不起作用总是在设计视图中显示约束布局
- dart - 使用变量作为键访问对象值
- r - 使用 dplyr 和 ggplot2 的函数中的 Tidyeval
- c# - 在数据库中插入多条记录的最佳方法
- python-3.x - 如何使用它们的 ID 映射 python 中两个 CSV 文件的值?
- unity3d - 为什么我无法旁加载我的 .appx 文件以及为什么找不到它?
- excel - vba 有没有办法比较来自两个不同工作表或文件的值?
- c# - 为列表中的每个字符串创建一个临时文件列表?
- r - ymax 计数值