1
import React, { ComponentType } from 'react';
2

3
// 定义HOC
4
function withLog(WrappedComponent: ComponentType) {
5
  const LoggedComponent = (props: any) => {
6
    console.log(`组件渲染：${WrappedComponent.displayName || WrappedComponent.name}`);
7
    console.log('传入props：', props);
8
    return <WrappedComponent {...props} />;
9
  };
10
  // 设置displayName，方便调试
11
  LoggedComponent.displayName = `withLog(${WrappedComponent.displayName || WrappedComponent.name})`;
12
  return LoggedComponent;
13
}
14

15
// 使用装饰器语法包装组件
16
@withLog
17
const MyComponent = (props: { text: string }) => {
18
  return <div>{props.text}</div>;
19
};

1
// 封装筛选逻辑的HOC
2
function withFilter<T>(WrappedComponent: ComponentType<{ list: T[]; filterParams: any }>) {
3
  return function FilterComponent(props: { rawList: T[]; filterConfig: any }) {
4
    // 抽离筛选逻辑：根据filterConfig过滤rawList
5
    const filterList = () => {
6
      const { rawList, filterConfig } = props;
7
      return rawList.filter(item => {
8
        // 价格区间筛选
9
        if (filterConfig.minPrice && item.price < filterConfig.minPrice) return false;
10
        if (filterConfig.maxPrice && item.price > filterConfig.maxPrice) return false;
11
        // 分类筛选
12
        if (filterConfig.category && item.category !== filterConfig.category) return false;
13
        return true;
14
      });
15
    };
16

17
    const filteredList = filterList();
18
    return <WrappedComponent list={filteredList} filterParams={props.filterConfig} />;
19
  };
20
}
21

22
// 商品列表组件
23
const ProductList = ({ list, filterParams }) => {
24
  return (
25
    <div>
26
      <div>筛选条件：{JSON.stringify(filterParams)}</div>
27
      <div className="product-list">
28
        {list.map(product => (
29
          <div key={product.id} className="product-item">
30
            <h3>{product.name}</h3>
31
            <p>价格：{product.price}</p>
32
          </div>
33
        ))}
34
      </div>
35
    </div>
36
  );
37
};
38

39
// 增强后的商品列表
40
const FilteredProductList = withFilter(ProductList);
41

42
// 业务中使用
43
function GoodsPage() {
44
  const rawProductList = [/* 原始商品数据 */];
45
  return (
46
    <FilteredProductList
47
      rawList={rawProductList}
48
      filterConfig={{ minPrice: 100, maxPrice: 1000, category: 'electronics' }}
49
    />
50
  );
51
}

1
import React, { ComponentType, useState, useCallback } from 'react';
2
import { debounce } from 'lodash';
3

4
// 封装表单提交逻辑的HOC
5
function withFormSubmit(WrappedComponent: ComponentType<{ onSubmit: (data: any) => void; loading: boolean }>) {
6
  return function FormSubmitComponent() {
7
    const [loading, setLoading] = useState(false);
8

9
    // 防抖 + 加载状态的提交函数
10
    const handleSubmit = useCallback(
11
      debounce(async (formData) => {
12
        setLoading(true);
13
        try {
14
          // 模拟接口提交
15
          await new Promise(resolve => setTimeout(resolve, 1000));
16
          console.log('表单提交成功：', formData);
17
        } catch (e) {
18
          console.error('表单提交失败：', e);
19
        } finally {
20
          setLoading(false);
21
        }
22
      }, 500),
23
      []
24
    );
25

26
    return <WrappedComponent onSubmit={handleSubmit} loading={loading} />;
27
  };
28
}
29

30
// 订单表单组件
31
const OrderForm = ({ onSubmit, loading }) => {
32
  const handleClick = () => {
33
    onSubmit({ orderNo: 'ORD123456', amount: 999 });
34
  };
35

36
  return (
37
    <div>
38
      <h3>订单提交表单</h3>
39
      <button onClick={handleClick} disabled={loading}>
40
        {loading ? '提交中...' : '提交订单'}
41
      </button>
42
    </div>
43
  );
44
};
45

46
// 增强后的订单表单
47
const OrderFormWithSubmit = withFormSubmit(OrderForm);
48

49
// 业务页面使用
50
function OrderPage() {
51
  return <OrderFormWithSubmit />;
52
}