为什么高阶组件比常规组件有用得多？答案

【问题标题】：Why are higher-order components a lot more useful than the regular component?为什么高阶组件比常规组件有用得多？
【发布时间】：2017-06-30 15:23:54
【问题描述】：

我似乎无法理解为什么高阶组件比常规组件更受重视？我读了一篇关于它们的教程，高阶组件很好，因为它们：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 应用程序中。

【问题讨论】：

标签： javascript reactjs

【解决方案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} />)

【讨论】：

【解决方案2】：

假设您有一个应用程序，其中某些屏幕是私有的，并且仅对经过身份验证的用户可用。想象一下，你有 3 个这样的屏幕。现在，在每个屏幕的容器组件上，您可以使用逻辑来检查用户是否已通过身份验证并让他们通过，或者在他们未通过时将其发送回登录。这意味着完全相同的逻辑发生 3 次。使用 HOC，您可以只对该逻辑进行一次编码，然后使用 HOC 将每个私有屏幕包装起来，从而一遍又一遍地为您提供相同的逻辑，但代码只需要存在于一个地方。这是 HOC 提供的出色代码重用示例。

【讨论】：

【解决方案3】：

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

在您的情况下，差异显而易见。非通用（低阶）组件里面有硬编码的 HTML。 这是编程 101；像 PI 这样的常量声明比像 3.14159 这样的硬编码声明更受欢迎，因为它们赋予幻数以意义并允许修改一点。

高阶“组件”（在本例中为高阶函数）的一个简单示例是排序函数，其参数之一是排序函数。通过允许由外部函数控制排序，您可以在不修改排序函数本身的情况下修改排序的行为。

【讨论】：