open-index/open-npm huggingface dataset:
npm package: @react-fox/ofc
Description: 全新设计的面向对象的函数组件，通过对象函数组件模式，实现高内聚，低耦合，强语义的开发模式。
Author: sschen86@163.com
Latest version: 0.2.0

# @ctsx/ofc

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

## 特点

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

## 安装

```bash
npm install @ctsx/ofc
```

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

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

```tsx
/// 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 组件的渲染

```tsx
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} />
    </>
  );
}
```