【React】常见的 HOC 使用案例

高阶组件(Higher-Order Component,HOC)是一种用于在 React 中复用组件逻辑的技术。以下是几个常见的 HOC 使用案例,以及详细的代码示例。

1. 日志记录 HOC

这个高阶组件将在每次组件更新时记录日志。

LoggingHOC.js
js 复制代码
import React from 'react';

const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`${WrappedComponent.name} mounted`);
    }

    componentDidUpdate() {
      console.log(`${WrappedComponent.name} updated`);
    }

    componentWillUnmount() {
      console.log(`${WrappedComponent.name} will unmount`);
    }

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

export default withLogging;
使用日志记录 HOC
js 复制代码
// src/App.js
import React from 'react';
import withLogging from './LoggingHOC';

const MyComponent = () => {
  return <div>My Component</div>;
};

const LoggedMyComponent = withLogging(MyComponent);

const App = () => {
  return (
    <div>
      <LoggedMyComponent />
    </div>
  );
};

export default App;

2. 数据获取 HOC

这个高阶组件在组件挂载时从一个 API 获取数据,并将数据传递给被包装的组件。

FetchDataHOC.js
js 复制代码
import React from 'react';

const withFetchData = (url) => (WrappedComponent) => {
  return class extends React.Component {
    state = {
      data: null,
      loading: true,
      error: null,
    };

    async componentDidMount() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ data, loading: false });
      } catch (error) {
        this.setState({ error, loading: false });
      }
    }

    render() {
      const { data, loading, error } = this.state;
      return <WrappedComponent data={data} loading={loading} error={error} {...this.props} />;
    }
  };
};

export default withFetchData;
使用数据获取 HOC
js 复制代码
// src/App.js
import React from 'react';
import withFetchData from './FetchDataHOC';

const DataComponent = ({ data, loading, error }) => {
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
};

const FetchDataComponent = withFetchData('https://api.example.com/data')(DataComponent);

const App = () => {
  return (
    <div>
      <FetchDataComponent />
    </div>
  );
};

export default App;

3. 权限控制 HOC

这个高阶组件根据用户权限来控制组件的渲染。

withAuthorization.js
js 复制代码
import React from 'react';

const withAuthorization = (requiredRole) => (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const { user } = this.props;
      if (user.role !== requiredRole) {
        return <div>You do not have permission to view this page</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withAuthorization;
使用权限控制 HOC
js 复制代码
// src/App.js
import React from 'react';
import withAuthorization from './withAuthorization';

const AdminPage = () => {
  return <div>Admin Page</div>;
};

const AuthorizedAdminPage = withAuthorization('admin')(AdminPage);

const App = () => {
  const user = { role: 'user' }; // change to 'admin' to see the page
  return (
    <div>
      <AuthorizedAdminPage user={user} />
    </div>
  );
};

export default App;

4. 动态样式 HOC

这个高阶组件根据 props 动态添加样式。

withDynamicStyles.js
js 复制代码
import React from 'react';

const withDynamicStyles = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const style = {
        color: this.props.color || 'black',
        fontSize: this.props.fontSize || '16px',
      };
      return <WrappedComponent {...this.props} style={style} />;
    }
  };
};

export default withDynamicStyles;
使用动态样式 HOC
js 复制代码
// src/App.js
import React from 'react';
import withDynamicStyles from './withDynamicStyles';

const StyledComponent = ({ style }) => {
  return <div style={style}>Styled Component</div>;
};

const DynamicStyledComponent = withDynamicStyles(StyledComponent);

const App = () => {
  return (
    <div>
      <DynamicStyledComponent color="red" fontSize="20px" />
    </div>
  );
};

export default App;

总结

高阶组件是一种强大的模式,可以在 React 中实现代码复用和逻辑抽象。通过高阶组件,你可以:

  • 提取和重用跨组件的逻辑
  • 控制组件的渲染
  • 操作传递给组件的 props
  • 管理和注入状态
相关推荐
ssf19876 分钟前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH6 分钟前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童11 分钟前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
非凡ghost16 分钟前
火狐浏览器(Firefox)tete009 Firefox 多语便携版
前端·firefox
文心快码BaiduComate17 分钟前
文心快码Comate3.5S更新,用多智能体协同做个健康管理应用
前端·人工智能·后端
袁煦丞20 分钟前
极空间变身全能私有云+1Panel傻瓜式部署:cpolar内网穿透实验室第618个成功挑战
前端·程序员·远程工作
袁煦丞23 分钟前
10.15-1 Reader电子书管理神器搭配极空间私有云:cpolar内网穿透实验室第488个成功挑战
前端·程序员·远程工作
ZHOUYUANN44 分钟前
我用JavaScript复刻了某宝的小游戏动物大迁徙消消乐
前端·javascript·游戏开发
Asort1 小时前
JavaScript设计模式(十三)——责任链模式:构建灵活高效的请求处理链
前端·javascript·设计模式
_Mya_1 小时前
后端接口又改了?让 Apifox MCP 帮你自动同步类型定义
前端·人工智能·mcp