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

它们看起来与接收道具的常规类定义几乎完全相同，并且您仍然能够操纵道具＆＃34;和＆＃34;操纵状态＆＃34;在那个班级里面

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

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

这不是要打击更高阶的组件---这实际上完全相反。我需要了解我的错误以及为什么我应该将更高阶的组件集成到我的反应应用程序中。

Answer 1

HOCs 绝对有用，但它们在任何＆＃34;更高阶次＆＃34;中都有用。功能是。

考虑以下组件：

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

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

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

这没有什么不妥，但也许你希望任何组件能够变成蓝色，而不仅仅是一个按钮。相反，我们可以制作一个通用的HOC，它可以消除＆＃34;蓝化＆＃34;传递的组件：

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这样的硬编码声明更受欢迎，因为它们赋予魔术数字含义并允许一个修改点。

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

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

3 个答案: