React 高阶组件（HOC）—— 让组件更“高”一等

2023-10-18 07:00:34

定义：解开高阶组件的神秘面纱

高阶组件（HOC）是一种设计模式，它允许你将一个组件作为参数传递给另一个函数，并返回一个新的组件。这个新组件将继承原组件的所有特性，但也可以添加新的功能或行为。

实例：小试牛刀，领略高阶组件的魅力

以下是一个使用高阶组件的小例子：

const withLogging = (Component) => {
  return (props) => {
    console.log(`Component ${Component.name} is being rendered.`);
    return <Component {...props} />;
  };
};

const MyComponent = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

const LoggedMyComponent = withLogging(MyComponent);

在这个例子中，withLogging 函数是一个高阶组件，它接受一个组件作为参数，并返回一个新的组件，该组件将记录每次渲染组件时的情况。

二次封装 Antd 弹窗组件，解锁代码复用的新姿势

高阶组件的一个常见用例是二次封装UI组件库中的组件。例如，你可以使用高阶组件来为 Antd 的 Modal 组件添加一个新的功能，比如在打开或关闭弹窗时显示一个加载指示器。

const withLoading = (Component) => {
  return (props) => {
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
      if (props.loading) {
        setIsLoading(true);
      } else {
        setTimeout(() => {
          setIsLoading(false);
        }, 300);
      }
    }, [props.loading]);

    return (
      <>
        {isLoading && <LoadingIndicator />}
        <Component {...props} />
      </>
    );
  };
};

const LoadingModal = withLoading(Modal);