HOC高阶组件

code sand box

高阶组件(HOC)是什么?

• HOC本质是一个函数
• 接受一个组件作为参数, 对该组件进行加工, 返回一个新的组件
• 类似于装饰器

你在业务中使用过解决了什么问题。

• 代码复用

• 1. 授权和权限管理: 

  • 例如，你可能有一些组件只允许认证过的用户访问。你 可以创建一个HOC，它接收一个组件并返回一个新的组件，新的组件在渲 染之前会检查用户是否已经认证。

• 2. 数据获取: 

  • 另一个常⻅的HOC用例是用于数据获取。例如，你可以创建一 个HOC，它接收一个组件并返回一个新的组件，新的组件在挂载时获取数 据，并将数据通过props传递给被包裹的组件。redux

• 3. 错误处理: 

  • 你可以创建一个HOC，它接收一个组件并返回一个新的组件， 新的组件包裹原组件的渲染，并在发生错误时显示错误信息或其他备用内 容。

import React from "react";

export function windowWidth<D extends {}>(Com: React.ComponentType<D>) {
  class HOC extends React.Component<D> {
    state = {
      windowWidth: window.innerWidth
    };

    onResize = () => {
      this.setState({
        windowWidth: window.innerWidth
      });
    };

    componentDidMount() {
      window.addEventListener("resize", this.onResize);
    }

    componentWillUnmount() {
      window.removeEventListener("resize", this.onResize);
    }

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

  return HOC;
}

使用

import { FC } from "react";
import { windowWidth } from "./windowWidth";

interface IXTxt {
  windowWidth?: number;
}

const XTxt: FC<IXTxt> = (props) => {
  return <div>窗口宽度: {props.windowWidth}</div>;
};

export default windowWidth(XTxt);