import re
from typing import Dict, Any, List, Optional, Tuple
from dataclasses import dataclass
from enum import Enum
class ComponentType(Enum):
"""组件类型"""
FUNCTIONAL = "functional"
CLASS = "class"
HOC = "hoc"
CUSTOM_HOOK = "custom_hook"
class StateManagementType(Enum):
"""状态管理类型"""
LOCAL_STATE = "local_state"
CONTEXT = "context"
REDUX = "redux"
MOBX = "mobx"
ZUSTAND = "zustand"
@dataclass
class ComponentSpec:
"""组件规格"""
name: str
type: ComponentType
props: List[Dict[str, Any]]
state: List[Dict[str, Any]]
methods: List[Dict[str, Any]]
lifecycle: List[str]
dependencies: List[str]
@dataclass
class PerformanceOptimization:
"""性能优化配置"""
use_memo: List[str]
use_callback: List[str]
memo_wrap: bool
lazy_load: bool
virtualize: bool
class ReactComponentDesigner:
def __init__(self):
self.component_templates = {}
self.optimization_strategies = {}
def design_component(self, spec: ComponentSpec,
state_management: StateManagementType = StateManagementType.LOC_STATE,
performance_config: Optional[PerformanceOptimization] = None) -> str:
"""设计React组件"""
# 生成组件代码
if spec.type == ComponentType.FUNCTIONAL:
component_code = self._generate_functional_component(spec, state_management, performance_config)
elif spec.type == ComponentType.CLASS:
component_code = self._generate_class_component(spec, state_management, performance_config)
else:
raise ValueError(f"不支持的组件类型: {spec.type}")
return component_code
def _generate_functional_component(self, spec: ComponentSpec,
state_management: StateManagementType,
performance_config: Optional[PerformanceOptimization]) -> str:
"""生成函数组件"""
imports = self._generate_imports(spec, state_management, performance_config)
# 组件定义
component_lines = []
# Props接口定义
if spec.props:
props_interface = self._generate_props_interface(spec.props)
component_lines.append(props_interface)
# 组件函数
component_lines.append(f"function {spec.name}({{") if spec.props else f"function {spec.name}() {{")
# Hook导入
hook_imports = self._generate_hook_imports(state_management, performance_config)
component_lines.extend(hook_imports)
# 状态定义
state_definitions = self._generate_state_definitions(spec.state, state_management)
component_lines.extend(state_definitions)
# 性能优化Hook
if performance_config:
optimizations = self._generate_performance_optimizations(performance_config, spec)
component_lines.extend(optimizations)
# 事件处理函数
event_handlers = self._generate_event_handlers(spec.methods)
component_lines.extend(event_handlers)
# 副作用
effects = self._generate_effects(spec.lifecycle, spec.state, spec.dependencies)
component_lines.extend(effects)
# 渲染逻辑
render_logic = self._generate_render_logic(spec)
component_lines.extend(render_logic)
component_lines.append("}")
# 组件导出
if performance_config and performance_config.memo_wrap:
component_lines.append(f"export default React.memo({spec.name});")
else:
component_lines.append(f"export default {spec.name};")
return '\n'.join([imports] + component_lines)
def _generate_class_component(self, spec: ComponentSpec,
state_management: StateManagementType,
performance_config: Optional[PerformanceOptimization]) -> str:
"""生成类组件"""
imports = self._generate_imports(spec, state_management, performance_config)
component_lines = []
# Props接口定义
if spec.props:
props_interface = self._generate_props_interface(spec.props)
component_lines.append(props_interface)
# 组件类定义
component_lines.append(f"class {spec.name} extends React.Component {{")
# 构造函数
if spec.state:
constructor = self._generate_constructor(spec.state)
component_lines.append(constructor)
# 生命周期方法
lifecycle_methods = self._generate_lifecycle_methods(spec.lifecycle, spec.state, spec.dependencies)
component_lines.extend(lifecycle_methods)
# 事件处理方法
event_handlers = self._generate_class_methods(spec.methods)
component_lines.extend(event_handlers)
# 渲染方法
render_method = self._generate_class_render(spec)
component_lines.append(render_method)
component_lines.append("}")
# 组件导出
component_lines.append(f"export default {spec.name};")
return '\n'.join([imports] + component_lines)
def _generate_imports(self, spec: ComponentSpec,
state_management: StateManagementType,
performance_config: Optional[PerformanceOptimization]) -> str:
"""生成导入语句"""
imports = ["import React;"]
# 状态管理相关导入
if state_management == StateManagementType.CONTEXT:
imports.append("import React, { useContext };")
elif state_management == StateManagementType.REDUX:
imports.extend(["import { useSelector, useDispatch } from 'react-redux';"])
elif state_management == StateManagementType.ZUSTAND:
imports.append("import { useStore } from 'zustand';")
# 性能优化相关导入
if performance_config:
if performance_config.use_memo or performance_config.use_callback:
imports.append("import React, { useMemo, useCallback };")
if performance_config.lazy_load:
imports.append("import React, { lazy, Suspense };")
if performance_config.virtualize:
imports.append("import { FixedSizeList as List } from 'react-window';")
return '\n'.join(imports)
def _generate_props_interface(self, props: List[Dict[str, Any]]) -> str:
"""生成Props接口"""
interface_lines = ["interface Props {"]
for prop in props:
prop_name = prop['name']
prop_type = prop['type']
optional = prop.get('optional', False)
default_value = prop.get('default', None)
optional_mark = "?" if optional else ""
line = f" {prop_name}{optional_mark}: {prop_type};"
if default_value is not None:
line += f" // 默认值: {default_value}"
interface_lines.append(line)
interface_lines.append("}")
return '\n'.join(interface_lines)
def _generate_hook_imports(self, state_management: StateManagementType,
performance_config: Optional[PerformanceOptimization]) -> List[str]:
"""生成Hook导入"""
imports = []
# 基础Hook
imports.append(" const [count, setCount] = React.useState(0);")
imports.append(" const [data, setData] = React.useState(null);")
# 状态管理Hook
if state_management == StateManagementType.CONTEXT:
imports.append(" const context = useContext(MyContext);")
elif state_management == StateManagementType.REDUX:
imports.append(" const dispatch = useDispatch();")
imports.append(" const state = useSelector(state => state.myReducer);")
elif state_management == StateManagementType.ZUSTAND:
imports.append(" const { state, actions } = useStore();")
return imports
def _generate_state_definitions(self, state_specs: List[Dict[str, Any]],
state_management: StateManagementType) -> List[str]:
"""生成状态定义"""
definitions = []
for state_spec in state_specs:
state_name = state_spec['name']
state_type = state_spec['type']
initial_value = state_spec.get('initial', None)
if initial_value is not None:
definition = f" const [{state_name}, set{state_name.capitalize()}] = React.useState({initial_value});"
else:
definition = f" const [{state_name}, set{state_name.capitalize()}] = React.useState<{state_type}>();"
definitions.append(definition)
return definitions
def _generate_performance_optimizations(self, config: PerformanceOptimization,
spec: ComponentSpec) -> List[str]:
"""生成性能优化代码"""
optimizations = []
# useMemo优化
for memo_item in config.use_memo:
optimizations.append(f" const memoized{memo_item} = useMemo(() => {{")
optimizations.append(f" // 计算{memo_item}的逻辑")
optimizations.append(f" return compute{memo_item}();")
optimizations.append(f" }}, [/* 依赖项 */]);")
# useCallback优化
for callback_item in config.use_callback:
optimizations.append(f" const handle{callback_item} = useCallback(() => {{")
optimizations.append(f" // 处理{callback_item}的逻辑")
optimizations.append(f" }}, [/* 依赖项 */]);")
return optimizations
def _generate_event_handlers(self, methods: List[Dict[str, Any]]) -> List[str]:
"""生成事件处理函数"""
handlers = []
for method in methods:
method_name = method['name']
method_params = method.get('params', [])
method_body = method.get('body', f"// {method_name}实现逻辑")
params_str = ", ".join(method_params)
handlers.append(f" const {method_name} = ({params_str}) => {{")
handlers.append(f" {method_body}")
handlers.append(f" }};")
return handlers
def _generate_effects(self, lifecycle: List[str], state: List[Dict[str, Any]],
dependencies: List[str]) -> List[str]:
"""生成副作用Hook"""
effects = []
# 基础useEffect
if 'componentDidMount' in lifecycle or 'useEffect' in lifecycle:
effects.append(" React.useEffect(() => {")
effects.append(" // 组件挂载后的逻辑")
effects.append(" cons