React SDK Manager

English | 中文

文档导航

• 核心特性
• 安装指南
• 快速开始
• API参考
• 实际应用
• 最佳实践
• 开发指南
• 贡献说明
• 许可证

核心特性 / Core Features

| 中文 | English | |------|---------| | 🔌 高级插件管理 - 插件注册、启用/禁用、依赖管理及循环依赖检测 | 🔌 Advanced Plugin Management - Plugin registration, enable/disable, dependency management with circular dependency detection | | 🗄️ 响应式状态管理 - 内置状态管理，支持持久化、历史记录和开发工具 | 🗄️ Reactive State Management - Built-in state management with persistence, history, and dev tools | | 🔄 完整生命周期系统 - 完整的生命周期管理，支持异步钩子和错误边界 | 🔄 Comprehensive Lifecycle System - Full lifecycle management with async hooks and error boundaries | | ⚛️ 深度 React 集成 - 原生 React 组件、钩子和高阶组件 | ⚛️ Deep React Integration - Native React components, hooks and HOCs | | 🛡️ 完整 TypeScript 支持 - 全面的类型定义和严格类型检查 | 🛡️ Full TypeScript Support - Comprehensive type definitions and strict type checking | | 🧪 测试就绪 - 内置测试支持和测试工具 | 🧪 Testing Ready - Built-in test support and utilities | | 🚀 性能优化 - 懒加载、树摇和最小化包体积 | 🚀 Performance Optimized - Lazy loading, tree-shaking and minimal bundle size | | 🔍 优秀的开发体验 - 调试模式、开发工具集成和全面的错误处理 | 🔍 Developer Experience - Debug mode, dev tools integration and comprehensive error handling |

安装指南 / Installation

# npm
npm install @webscript/react-sdk-manager

# yarn
yarn add @webscript/react-sdk-manager

# pnpm
pnpm add @webscript/react-sdk-manager

对等依赖 / Peer Dependencies

npm install react react-dom

快速开始 / Quick Start

基础设置 / Basic Setup

import React from 'react';
import { SDKProvider, useSDK } from '@webscript/react-sdk-manager';

const App = () => {
  return (
    <SDKProvider 
      config={{
        name: 'My App',
        initialState: { theme: 'light' },
        debug: true
      }}
    >
      <MyComponent />
    </SDKProvider>
  );
};

const MyComponent = () => {
  const sdk = useSDK();
  return <div>SDK Version: {sdk.getInfo().version}</div>;
};

完整示例 / Complete Example

查看完整示例代码: examples/complete-demo.tsx

API参考 / API Reference

SDK配置 / SDK Configuration

interface SDKConfig {
  name: string;                    // SDK名称 / SDK name
  initialState?: any;              // 初始状态 / Initial state
  persist?: boolean;               // 启用状态持久化 / Enable state persistence
  plugins?: Plugin[];              // 初始插件 / Initial plugins
}

插件接口 / Plugin Interface

interface Plugin {
  name: string;                    // 唯一标识符 / Unique identifier
  component?: React.ComponentType; // React组件 / React component
  initialize?: () => void;         // 初始化函数 / Initialization function
}

详细API文档:

• 核心模块
• 工具函数
• 组件文档

实际应用 / Real-World Examples

电商平台 / E-commerce Platform

const ProductCatalog = createPlugin({
  name: 'product-catalog',
  component: () => (
    <ProductGrid>
      <ProductFilter />
    </ProductGrid>
  )
});

用户管理系统 / User Management System

const UserPlugin = createPlugin({
  name: 'user-plugin',
  dependencies: ['auth-plugin'],
  component: ({ sdk }) => {
    const [users] = useUserData();
    return <UserList users={users} />;
  }
});

最佳实践 / Best Practices

1. 从简单开始 - 从基础插件开始，逐步增加复杂性
   Start Simple - Begin with basic plugins, add complexity gradually

2. 使用TypeScript - 利用类型安全获得更好的开发体验
   Use TypeScript - Leverage type safety for better DX

3. 错误处理 - 始终实现适当的错误边界
   Error Handling - Always implement error boundaries

4. 状态管理 - 谨慎使用全局状态，在可能的情况下优先使用本地状态
   State Management - Use global state judiciously, prefer local state

开发指南 / Development

# 安装依赖 / Install dependencies
npm install

# 开发模式 (监听文件变化) / Dev mode (watch files)
npm run dev

# 生产环境构建 / Production build
npm run build

# 运行测试 / Run tests
npm test

# 代码检查 / Lint code
npm run lint

# 类型检查 / Type checking
npm run typecheck

贡献说明 / Contributing

我们欢迎贡献！请查看贡献指南了解详情。
We welcome contributions! See CONTRIBUTING.md for details.

许可证 / License

该项目基于MIT许可证 - 详情请查看LICENSE文件。
Licensed under MIT - see LICENSE file.