ComponentTemplate+stateHook：灵活高效的组件封装思路

2023-11-30 18:58:40

业务组件封装思路：ComponentTemplate+stateHook

引言

在复杂的系统开发中，组件化开发是一种重要的架构思想，它能够有效提高代码的可复用性和维护性。随着业务逻辑的日益复杂，如何高效、灵活地封装业务组件成为了一大挑战。本文将探讨一种相对灵活的组件封装思路：ComponentTemplate+stateHook。

常规组件抽取思路的困境

传统的组件抽取思路通常是基于业务场景直接抽取，即从一个页面或者功能模块中抽取可复用的组件。这种思路简单直接，但在面对复杂多变的业务场景时，容易遇到以下困境：

复用性受限： 组件与业务场景紧耦合，复用范围窄；
扩展性差： 组件只针对特定场景优化，扩展能力弱；
维护困难： 组件分散在各个业务场景中，维护成本高。

ComponentTemplate+stateHook 思路简介

针对上述困境，本文提出了一种更灵活的组件封装思路：ComponentTemplate+stateHook。它将组件抽取与业务逻辑分离，通过模板模式和状态钩子的组合，实现组件的可复用、可扩展和可维护。

ComponentTemplate： 封装组件的通用结构和行为，提供统一的API接口，用于控制组件的渲染和生命周期。

stateHook： 用于管理组件的内部状态，它是一个函数，接受组件的props和state作为输入，返回一个新的state对象。通过stateHook，可以灵活地修改组件的状态，而无需修改ComponentTemplate。

思路优势

ComponentTemplate+stateHook 思路具有以下优势：

复用性高： ComponentTemplate 提供统一的接口，可以将组件逻辑与业务逻辑解耦，提高组件的复用性；
扩展性强： 通过 stateHook，可以灵活地扩展组件的功能，而无需修改 ComponentTemplate；
维护性好： 组件的业务逻辑集中在 stateHook 中，维护成本低。

思路实践

下面通过一个示例来说明 ComponentTemplate+stateHook 思路的实践。假设我们要封装一个可复用的按钮组件。

ComponentTemplate：

const ButtonTemplate = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

stateHook：

const buttonStateHook = (props, state) => {
  const { disabled, loading } = state;

  // ... 修改 state 的逻辑

  return {
    // ... 返回新的 state
  };
};

使用示例：

const MyButton = () => {
  const [state, setState] = useState({
    disabled: false,
    loading: false,
  });

  const buttonProps = {
    label: '确定',
    onClick: () => {
      // ... 按钮点击逻辑
    },
  };

  return (
    <ButtonTemplate
      {...buttonProps}
      state={state}
      setState={setState}
    />
  );
};