@ctsx/ofc v0.2.0

@ctsx/ofc

全新设计的面向对象的函数组件，通过对象函数组件模式，实现高内聚，低耦合，强语义的开发模式。

特点

• ✔ 高内聚、低耦合，强语义
• ✔ 面向对象的组件调用
• ✔ 完美支持 typescript 类型检测
• ✔ 完美契合函数组件及 react-hook 模式

安装

npm install @ctsx/ofc

场景 1 - 高内聚、低耦合、强语义

通过ofc对象函数组件创建组件

/// createDialog.tsx
import { ofc } from '@ctsx/ofc';
export const createDialog = ofc(
  ({ initState, update, exports, option, state, props }) => {
    // 初始化状态
    initState({
      visible: false,
    });

    // 导出接口
    exports({
      open() {
        update({ visible: true });
      },
      close() {
        update({ visible: false });
      },
    });

    // 返回JSX
    return (
      <div
        style={{
          display: state.visible ? '' : 'none',
          border: '1px solid #000',
        }}
      >
        <h3>
          {option.title}:{props.count}
        </h3>
        Dialog
      </div>
    );
  }
);

使用

• 弹窗的打开、关闭通过语义化的接口实现
• 弹窗的状态是高内聚的，状态不对外部暴露，所以更新不会触发父模块的渲染
• 支持 option，props 传递参数，灵活的书写方式
• 父组件渲染时智能判断依赖来决定是否触发 OFC 组件的渲染

import { createDialog } from './createDialog';
function ModTest() {
  const Dialog = createDialog({
    title: '标题',
  });

  return (
    <>
      <button
        onClick={() => {
          Dialog.open();
        }}
      >
        open
      </button>
      <button
        onClick={() => {
          Dialog.close();
        }}
      >
        close
      </button>
      <Dialog count={8} />
    </>
  );
}