为什么高阶组件比普通组件更有用？

Question

我似乎无法理解为什么高阶组件比常规组件更受重视？我读了一篇关于它们的教程，得知高阶组件之所以好是因为：1）允许代码重用、逻辑和引导抽象。2）能够进行渲染劫持。3）可以抽象出状态并对其进行操作。4）能够操作props。来源：链接 其中一个高阶组件的代码示例如下：

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}/>
    }
  }
}

这段代码几乎和一个接收props的普通类定义完全相同，你仍然可以在该类内部“操作props”和“操作state”

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>
    );
  }
}

实际上，我没有操作或更改props的能力，但我可以接收它们，将它们应用于状态并输出该状态。

这并不是对高阶组件的抨击 - 实际上恰恰相反。我需要理解我错在哪里以及为什么应该将高阶组件集成到我的React应用程序中。

- Chris

Answer 1

HOCs是非常有用的，但它们的用处与任何“高阶”函数的用处相同。

考虑以下组件：

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} />)

- azium

Answer 2

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

- Chaim Friedman

Answer 3

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

在您的情况下，差异是显而易见的。非通用化（低阶）组件中有硬编码的HTML。这是编程101; 常量声明（如PI）优先于硬编码声明（如3.14159），因为它们赋予魔数以含义，并允许一个修改点。

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

- Robert Harvey