React@16.x（10）HOC高阶组件和横切关注点

最新推荐文章于 2024-07-24 11:09:48 发布

下雪天的夏风

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量1k

点赞数 36

分类专栏： react16 文章标签： react.js javascript vue.js

本文链接：https://blog.csdn.net/qq_40147756/article/details/139029360

版权

react16 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

1，什么是HOC

HOF：Heighter-Order Function。高阶函数，以函数为参数并返回一个函数。
HOC：Higher-Order Components。高阶组件，以组件为参数并返回一个组件。

2，什么是横切关注点

2.1，简单理解

在系统中横跨了多个模块或组件的，需要考虑的一些特定逻辑或领域（关注点）。它们和业务逻辑相独立，但在系统中多个部分重复出现。

这些关注点，都属于辅助功能，服务于核心功能–>业务逻辑。

对前端来说，常见的：

日志记录。在多个位置都需要记录信息，以便于调试和监控。
异常处理。在多个位置都需要捕获和处理异常。
依赖注入。可以管理组件之间的依赖关系，比如在多个位置都需要组件的实例。
状态管理。不多赘述。
国际化。不多赘述。

2.2，常见解决方式

Vue 中的组件封装，mixin、hooks（Vue3）、自定义指令、状态管理，路由守卫都属于解决该问题的范畴。

React 中的组件封装，HOC，hooks，Context，状态管理也属于解决该问题的范畴。

一些设计模式：装饰器模式，观察者模式，责任链模式（处理审批）。

3，HOC 举例

React 中，通常会以 src/HOC 创建目录，文件名以 with 开头。

使用 React16 进行开发离不开 HOC，无论是第3方库还是日常开发。下面只是简单举例，后面的文章也会遇到 HOC 的使用。

3.1，全局功能

比如，日志记录：

import { Component } from "react";

export default function withLog(Comp) {
    return class LogWrapper extends Component {
        componentDidMount() {
            console.log(`${Comp.name}组件被创建了`);
        }
        componentWillUnmount() {
            console.log(`${Comp.name}组件被销毁了`);
        }
        render() {
            return <Comp {...this.props} />;
        }
    };
}

使用

import HelloWorld from "./components/HelloWorld";
import withLog from "./HOC/withLog";

const Alog = withLog(HelloWorld)

因为是函数，所以可嵌套来增加多个额外功能。

const ResultComp = withLogin(withLog(CompA))

3.2，小范围使用

比如生成遍历循环的选项。

import { Component } from "react";
export default function withDataGroup(Comp) {
    return class DataGroupWrapper extends Component {
        static defaultProps = {
            datas: [],
        };

        render() {
            const comps = this.props.datas.map((it) => <Comp key={it.value} info={it} {...this.props} />);
            return <>{comps}</>;
        }
    };
}

Select 组件。保持源数据 data 数据结构一致时，checkbox 组件也可以使用 withDataGroup。

import { Component } from "react";
import withDataGroup from "./HOC/withDataGroup";

class Option extends Component {
    render() {
        return <option value={this.props.info.value}>{this.props.info.text}</option>;
    }
}

const OptGroup = withDataGroup(Option);

export default class Select extends Component {
    render() {
        return (
            <select
                value={this.props.value}
                onChange={(e) => {this.props.onChange?.(e.target.value);}}
            >
                <OptGroup {...this.props}></OptGroup>
            </select>
        );
    }
}

使用

import React, { Component } from "react";
import Select from "./components/Select";

const datas = [
    { value: "football", text: "足球" },
    { value: "basketball", text: "篮球" },
    { value: "movie", text: "电影" },
];

export default class App extends Component {
    state = {
        value: "",
        datas,
    };
    handleChange = (value, name, e) => {
        this.setState({
            value,
        });
    };
    render() {
        return (
            <>
                <div>{this.state.value}</div>
                <Select {...this.state} onChange={this.handleChange} />
            </>
        );
    }
}