【React】 HOC高阶组件介绍

cangloe

于 2024-07-21 18:16:11 发布

阅读量308

点赞数 3

分类专栏： react 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/u013675821/article/details/140591508

版权

react 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

高阶组件（Higher-Order Component，HOC）是 React 中用于代码复用的一种技术。HOC 本质上是一个函数，它接受一个组件并返回一个新的组件。高阶组件通常用于跨多个组件提取和重用逻辑。

高阶组件简介

高阶组件的概念类似于 JavaScript 中的高阶函数。它不修改原始组件，而是通过包装它并返回一个新组件来扩展组件的功能。HOC 最常用于处理以下场景：

逻辑复用（例如，处理身份验证、数据获取等）
渲染劫持（通过控制组件的渲染逻辑）
状态抽象和注入（管理和注入状态）
props 操作（修改或增加传递给子组件的 props）

使用高阶组件的基本步骤

创建一个函数，它接收一个组件作为参数。
在这个函数内部，创建一个新组件，这个新组件包含一些附加的逻辑。
将传递给新组件的 props 传递给被包装的组件。
返回这个新组件。

高阶组件示例

我们将创建一个简单的示例，展示如何使用 HOC 实现一个组件的身份验证逻辑。如果用户没有登录，则重定向到登录页面；如果用户已登录，则显示目标组件。

1. 创建 AuthHOC.js

import React from 'react';
import { Redirect } from 'react-router-dom';

const withAuth = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const isAuthenticated = /* your logic to check authentication */;
      
      if (!isAuthenticated) {
        return <Redirect to="/login" />;
      }

      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withAuth;

2. 创建目标组件

创建一个示例组件 Dashboard，它只有在用户登录时才会显示。

// src/pages/Dashboard.js
import React from 'react';

const Dashboard = () => {
  return <div>Dashboard Page - Only accessible if authenticated</div>;
};

export default Dashboard;

3. 包装目标组件

使用高阶组件包装 Dashboard 组件，以便添加身份验证逻辑。

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import withAuth from './AuthHOC';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';

const AuthenticatedDashboard = withAuth(Dashboard);

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/dashboard" component={AuthenticatedDashboard} />
        <Redirect from="/" to="/dashboard" />
      </Switch>
    </Router>
  );
};

export default App;

4. 创建登录页面

创建一个简单的登录页面组件。

// src/pages/Login.js
import React from 'react';

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

export default Login;

解释

withAuth 高阶组件: withAuth 是一个高阶组件，它接受一个组件 WrappedComponent 并返回一个新组件。新组件在渲染时检查用户是否已认证，如果未认证，则重定向到登录页面。
Dashboard 组件: Dashboard 是一个示例组件，仅在用户登录时显示。
包装组件: 使用 withAuth 高阶组件包装 Dashboard 组件，生成一个新的组件 AuthenticatedDashboard，该组件包含身份验证逻辑。
路由配置: 在 App 组件中配置路由，当访问 /dashboard 路径时，将渲染 AuthenticatedDashboard 组件。未认证的用户会被重定向到登录页面。

完整代码结构

my-react-app/
│
├── src/
│   ├── pages/
│   │   ├── Dashboard.js
│   │   ├── Login.js
│   ├── AuthHOC.js
│   ├── App.js
│   └── index.js
├── public/
│   ├── index.html
│   └── ...
├── package.json
└── ...