React高阶组件的使用方法介绍

了解什么是高阶组件，以及它们在为React应用程序编程时如何发挥作用

你可能对JavaScript中的高阶函数很熟悉。那些是接受函数作为参数的函数，和/或返回函数。

这些函数的两个例子是Array.map() 或Array.filter() 。

在React中，我们把这个概念扩展到组件上，因此，当组件接受一个组件作为输入并返回一个组件作为其输出时，我们就有了高阶组件（HOC）。

一般来说，高阶组件允许你创建可组合和可重用的代码，而且也更有封装性。

我们可以使用高阶组件来为组件的状态添加方法或属性，或者为Redux商店添加方法或属性。

当你想增强一个现有的组件，对其状态或道具或其渲染的标记进行操作时，你可能想使用高阶组件。

有一个惯例是在高阶组件前加上with 字符串（这是一个惯例，所以不是强制性的），所以如果你有一个Button 组件，它的HOC对应部分应该被称为withButton 。

让我们来创建一个。

最简单的HOC例子是一个返回组件的例子，它没有改变。

const withElement = Element => () => <Element />

让我们把它变得更有用一点，除了它已经带有的所有道具外，再给该元素添加一个属性，即颜色。

const withColor = Element => props => <Element {...props} color="red" />

我们在组件的JSX中使用这个HOC。

const Button = () => {
  return <button>test</button>
}

const ColoredButton = withColor(Button)

而我们最终可以在我们的应用程序中渲染WrappedButton组件的JSX。

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <ColoredButton />
    </div>
  )
}

这是一个非常简单的例子，但希望你在将这些概念应用于更复杂的场景之前，能够得到HOC的要点。