使用 Higher Order Component(HOC) 提升 React 组件的复用性

在 React 中，我们常常需要将一些逻辑应用到多个组件中，这时候就可以使用 Higher Order Component(HOC) 来提升组件的复用性。HOC 是一个函数，接收一个组件作为参数，并返回一个新的组件。

HOC 的基本用法

HOC 的基本用法很简单，我们可以定义一个 HOC 函数，接收一个组件作为参数，并返回一个新的组件，例如：

function withLog(Component) {
  return function(props) {
    console.log(`Rendering ${Component.name} with props:`, props)
    return <Component {...props} />
  }
}

这个 HOC 函数接收一个组件作为参数，返回一个新的组件，新的组件在渲染时会输出组件名称和 props。我们可以使用这个 HOC 函数来包装我们的组件：

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>
}

const MyComponentWithLog = withLog(MyComponent)

这样，我们就得到了一个新的组件 MyComponentWithLog，它会在渲染时输出组件名称和 props。我们可以像使用普通组件一样使用它：

<MyComponentWithLog name="World" />

HOC 的高级用法

除了简单的日志输出，HOC 还可以实现更复杂的逻辑，例如：

条件渲染

我们可以定义一个 HOC 函数，接收一个条件作为参数，并返回一个新的组件。新的组件会根据条件渲染原始组件或者不渲染任何内容，例如：

function withCondition(condition) {
  return function(Component) {
    return function(props) {
      return condition(props) ? <Component {...props} /> : null
    }
  }
}

这个 HOC 函数接收一个条件作为参数，返回一个新的函数，这个函数接收一个组件作为参数，返回一个新的函数，这个函数接收组件的 props，根据条件渲染原始组件或者不渲染任何内容。我们可以使用这个 HOC 函数来包装我们的组件：

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>
}

const MyComponentWithCondition = withCondition(props => props.name)(MyComponent)

这样，我们就得到了一个新的组件 MyComponentWithCondition，它会根据 props.name 是否存在来渲染原始组件或者不渲染任何内容。我们可以像使用普通组件一样使用它：

<MyComponentWithCondition name="World" />

生命周期方法

我们可以定义一个 HOC 函数，接收一个生命周期方法作为参数，并返回一个新的组件。新的组件会在对应的生命周期方法中执行逻辑，例如：

function withLifecycle(lifecycle) {
  return function(Component) {
    return class extends React.Component {
      componentDidMount() {
        lifecycle(this.props)
      }

      render() {
        return <Component {...this.props} />
      }
    }
  }
}

这个 HOC 函数接收一个生命周期方法作为参数，返回一个新的函数，这个函数接收一个组件作为参数，返回一个新的类组件，新的类组件在对应的生命周期方法中执行逻辑。我们可以使用这个 HOC 函数来包装我们的组件：

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>
}

const MyComponentWithLifecycle = withLifecycle(props => {
  console.log(`Component ${MyComponent.name} mounted with props:`, props)
})(MyComponent)

这样，我们就得到了一个新的组件 MyComponentWithLifecycle，它会在 componentDidMount 生命周期方法中输出组件名称和 props。我们可以像使用普通组件一样使用它：

<MyComponentWithLifecycle name="World" />

总结

使用 Higher Order Component(HOC) 可以帮助我们提升组件的复用性，实现更高级的逻辑。我们可以定义一个 HOC 函数，接收一个组件作为参数，并返回一个新的组件。新的组件可以根据需要渲染原始组件或者不渲染任何内容，执行复杂的逻辑，或者在生命周期方法中执行逻辑。使用 HOC 可以让我们更加灵活地组合组件，提高代码的复用性和可维护性。

示例代码：https://codesandbox.io/s/hoc-example-0l4j4

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a3afceb4cecbf2df6b9bc