时间戳

首页 > 解决方案 > 对象在编程中的作用能否与 React 中高阶组件的工作方式相比较

javascript - 对象在编程中的作用能否与 React 中高阶组件的工作方式相比较

问题描述

我是编程新手，在学习了一些 JS 之后，我决定做一些 React。坦率地说，在我学习 OOP 的过程中，我无法正确理解对象的概念，因此决定继续学习，希望以后能弄清楚这个概念。后来在 React 中遇到 HOC 的概念，它基本上可以帮助我们在 React 应用中重用某个逻辑，也就是说，如果我们在几个地方使用了一个悬停逻辑，那就是当我们创建 HOC 并在悬停的任何地方重用它使用逻辑。我唯一和主要的问题是面向对象编程中的对象是否以相同的方式工作，也就是说，每当我们在多个地方使用某种逻辑时，我们都需要创建一个对象，然后再重用它。我可以认为 OOP 中的对象就像 React 中的 HOC 吗？

标签： javascriptreactjsoop

解决方案

面向对象编程依赖于继承作为一种在父子层次结构中的对象之间共享代码的技术。父子层次结构严格的树状性质意味着遇到“钻石问题”并不少见。

在此处输入图像描述

在此示例中，Scanner并Printer继承自PoweredDevice. Copier需要共享两者的行为，Scanner但Printer在大多数面向对象的编程语言中，您不允许从两个父级继承。

其他语言和库支持一种称为组合的技术，作为继承的替代方法。React 属于这一类。您可以使用高阶组件定义任意数量的可重用行为，然后将它们全部应用于组件。

function Copier() {
  return (
    // ...
  )
}

export default withScanner(withPrinter(App)))

您仍在创建层次结构，但您是在运行时动态创建它们。没有静态规则说withPrinter必须是子类——withPoweredDevice不像传统继承，在创建类时（编译之前）必须定义层次结构。

React 文档甚至提供了一个解决“组合与继承”的文档，这是继续阅读以了解两种范式之间差异的好地方。

总结：

  • OOP 和 HOC 都支持代码重用
  • OOP 类只能从一个父类扩展
  • React 组件可以用任意数量的 HOC 包装
  • OOP 只允许沿静态编译时层次结构重用
  • HOC 支持跨动态运行时层次结构重用

推荐阅读