React 高阶组件 (HOC) 实例详解-JavaScript中文网-JavaScript教程资源分享门户

前言

React 是目前前端开发中最流行的框架之一，它提供了一些非常强大的概念，例如组件化、虚拟 DOM、生命周期等等。在 React 中，开发者可以通过组合不同的组件来构建复杂的界面，这种组合方式相对于传统的模板方式更加灵活，且易于维护。

然而，在实际开发中，我们常常会遇到一些问题。例如，我们需要在多个组件中重复使用相同的逻辑代码，这样会导致代码冗余。这时，React 高阶组件 (HOC) 就可以派上用场了。

什么是高阶组件 (HOC)

高阶组件 (HOC) 是一个函数，它接受一个组件并返回一个新的组件。这个新的组件具有被包裹的原组件的所有功能，同时可以额外添加一些功能。这种技术可以让我们将重复的逻辑代码抽象为一个单独的函数，并使其易于复用。

在 React 中，高阶组件通常用于以下几种场景：

代码复用，例如多个组件需要共享相同的操作逻辑。
渲染劫持，例如在实现某些特殊功能（如权限验证、错误处理等）时需要修改组件的渲染方式。
Props 提取，例如将某些组件需要的公共 Props 提取到高阶组件中，以避免重复输入。

HOC 的基本结构

一个简单的高阶组件基本结构如下：

function withHoc(WrappedComponent) {
  return class extends React.Component {
    render() {
      // 在这里添加额外的逻辑处理
      return <WrappedComponent {...this.props} />;
    }
  }
}

上面的代码中，我们定义了一个名为 withHoc 的函数，它接受一个组件 WrappedComponent 作为参数，并返回一个新的组件。这个新的组件是通过一个匿名类进行定义的，其中拥有被包裹的原组件的所有功能，同时可以额外添加一些功能。

HOC 的应用

代码复用

一个常见的使用场景是，我们需要在多个组件中重复使用相同的操作逻辑，例如某些组件需要定时更新数据。这时，我们可以将这些动态更新的逻辑提取到一个高阶组件中，并将需要使用该逻辑的组件与该组件进行连接。

例如，下面是一个名为 withTimer 的高阶组件，它可以在被包裹的组件中更新时间。

// javascriptcn.com 代码示例
function withTimer(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        time: new Date()
      };
    }

    componentDidMount() {
      this.timer = setInterval(() => {
        this.setState({
          time: new Date()
        });
      }, 1000);
    }

    componentWillUnmount() {
      clearInterval(this.timer);
    }

    render() {
      return <WrappedComponent time={this.state.time} {...this.props} />;
    }
  };
}

我们可以将这个高阶组件与任意一个需要使用时间更新的组件进行连接，例如一个名为 Clock 的组件：

class Clock extends React.Component {
  render() {
    const { time } = this.props;
    return <div>{time.toLocaleTimeString()}</div>;
  }
}

const ClockWithTimer = withTimer(Clock);

上面的代码中，我们使用 withTimer 函数将 Clock 组件与 withTimer 组件进行了连接，从而使得 Clock 组件可以自动更新当前时间。

ReactDOM.render(<ClockWithTimer />, document.getElementById('root'));

渲染劫持

在某些场景下，我们需要对组件的渲染进行特殊的处理，例如实现页面权限控制。这时，我们可以使用高阶组件来改变组件的渲染方式。

例如，下面是一个名为 withPermission 的高阶组件，它可以在被包裹的组件中检测用户是否有访问当前页面的权限，如果没有权限，则渲染一个错误提示信息。

// javascriptcn.com 代码示例
function withPermission(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        hasPermission: false
      };
    }

    componentDidMount() {
      // 模拟检测权限
      const hasPermission = Math.random() >= 0.5;
      this.setState({ hasPermission });
    }

    render() {
      const { hasPermission } = this.state;
      if (!hasPermission) {
        return <div>很抱歉，您没有访问该页面的权限。</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
}

我们可以将这个高阶组件与任意一个需要进行页面权限控制的组件进行连接。例如，一个名为 Home 的组件：

class Home extends React.Component {
  render() {
    return <div>欢迎访问我的博客！</div>;
  }
}

const HomeWithPermission = withPermission(Home);

上面的代码中，我们使用 withPermission 函数将 Home 组件与 withPermission 组件进行了连接，从而实现了页面权限控制的功能。

ReactDOM.render(<HomeWithPermission />, document.getElementById('root'));

Props 提取

在某些情况下，我们可能希望将某些组件需要的公共 Props 提取到高阶组件中，并将这些 Props 通过高阶组件传递给被包裹的组件。

例如，下面是一个名为 withUser 的高阶组件，它需要通过接口获取用户信息，并将用户信息通过名为 user 的 Props 传递给被包裹的组件。

// javascriptcn.com 代码示例
function withUser(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        user: null
      };
    }

    async componentDidMount() {
      const response = await fetch('/api/user');
      const user = await response.json();
      this.setState({ user });
    }

    render() {
      const { user } = this.state;
      return <WrappedComponent user={user} {...this.props} />;
    }
  };
}

我们可以将这个高阶组件与任意一个需要使用用户信息的组件进行连接，例如一个名为 UserProfile 的组件：

// javascriptcn.com 代码示例
class UserProfile extends React.Component {
  render() {
    const { user } = this.props;
    if (!user) {
      return <div>正在加载用户信息...</div>;
    }
    return (
      <div>
        <div>{user.name}</div>
        <div>{user.email}</div>
      </div>
    );
  }
}

const UserProfileWithUser = withUser(UserProfile);

上面的代码中，我们使用 withUser 函数将 UserProfile 组件与 withUser 组件进行了连接，从而使得 UserProfile 组件可以获取到用户信息。

ReactDOM.render(<UserProfileWithUser />, document.getElementById('root'));

总结

React 高阶组件 (HOC) 是一个非常强大的概念，它可以帮助我们解决许多在实际开发中遇到的问题。前文介绍了高阶组件的基本结构和应用场景，并给出了一些示例代码。

如果没有理解高阶组件的概念或示例代码，我建议读者可以从 React 官方文档入手，并多加练习，掌握这个技术的使用方法。

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