为什么高阶组件比常规组件更有用？

Question

我似乎不能理解为什么高阶分量比常规分量更有价值？我读了一篇关于它们的教程，高阶组件很好，因为它们: 1)允许代码重用、逻辑和引导抽象。2)能够进行渲染劫持。3)能够抽象状态并对其进行操作。4)能够操纵道具。来源：link

代码中高阶组件的示例如下所示：

function refsHOC(WrappedComponent) {
  return class RefsHOC extends React.Component {
    proc(wrappedComponentInstance) {
      wrappedComponentInstance.method()
    }

    render() {
      const props = Object.assign({}, this.props, {ref: this.proc.bind(this)})
      return <WrappedComponent {...props}/>
    }
  }
}

这些代码看起来与接收道具的常规类定义几乎完全相同，而且您仍然可以在该类中“操纵道具”和“操纵状态”。

class Something extends React.Component {
  constructor(props) {
    super(props);
    this.state = { food: 'no_food_received_yet' } 
  }
  componentDidMount() {
    this.setState({ food: 'apple' });
  }
  render() {
    return (
      <div>
       <p>{ this.state.food }</p>
       <h2>{ this.props.food }</h2>
      </div>
    );
  }
}

实际上，我没有操作或改变道具，但我可以接收它们，将它们应用于状态，并输出该状态。

这不是在猛烈抨击更高阶的组件-这实际上是完全相反的。我需要知道我错在哪里，以及为什么我应该将更高阶的组件集成到我的react应用程序中。

Answer 1

HOC绝对有用，但它们的用处与任何“高阶”函数的用处相同。

考虑以下组件：

let Button = props => <button style={{ color: props.color }} />

您可以制作另一个名为BlueButton的组件：

let BlueButton = props => <Button color="blue" />

这没有什么错，但也许您希望任何组件都可以是蓝色的，而不仅仅是一个按钮。取而代之的是，我们可以做一个泛型的HOC来“蓝化”传递的组件：

let blueify = Component => props => <Component {...props} style={{ color: 'blue' }} />

然后你可以做蓝色的按钮，蓝色的div，蓝色的任何东西！

let BlueButton = blueify(Button)
let BlueDiv = blueify(props => <div {...props} />)

Answer 2

假设您有一个应用程序，其中某些屏幕是私有的，只有经过身份验证的用户才能使用。想象一下，你有3个这样的屏幕。现在，在每个屏幕的容器组件上，您可以使用逻辑检查用户是否已通过身份验证，如果通过则让用户通过，或者在用户未通过身份验证时将其发送回登录。这意味着完全相同的逻辑会发生3次。使用HOC，您只需编写该逻辑一次，然后将每个私有屏幕包含在HOC中，从而一遍又一遍地提供相同的逻辑，但代码只需要存在于一个位置。这是HOC提供的一个很好的代码重用示例。

Answer 3

高阶分量更一般化，因此在理论上可以应用于更广泛的情况。在更一般的意义上，高阶组件(和更高级别的语言)往往更具表现力。

在您的情况下，差异是显而易见的。非泛化(低阶)组件中包含硬编码的HTML。这是编程101；像PI这样的常量声明比像3.14159这样的硬编码声明更受欢迎，因为它们赋予了幻数的含义，并允许进行一点修改。

高阶“组件”(在本例中是高阶函数)的一个简单示例是一个排序函数，它将排序函数作为其参数之一。通过允许外部函数控制排序，您可以修改排序的行为，而无需修改排序函数本身。