メニュー
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/microwind/ai-skills --skill reactコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | React组件最佳实践 |
| description | 当开发React组件时，设计组件架构，实现状态管理，优化性能。处理组件通信，实现复用逻辑，和最佳实践应用。 |
| license | MIT |
React组件开发是前端开发的核心技能。不当的组件设计会导致代码重复、性能问题、维护困难。需要系统性的组件设计和优化方法。
核心原则: 好的React组件应该单一职责、可复用、可测试、性能优良。坏的组件会职责混乱、难以复用、测试困难、性能低下。
始终:
触发短语:
问题:
组件承担过多职责，代码复杂难维护
错误示例:
- 一个组件处理UI、业务逻辑、数据获取
- 组件内部包含过多不相关的功能
- 组件依赖过多外部状态
- 组件接口设计不合理
解决方案:
1. 遵循单一职责原则
2. 拆分复杂组件
3. 提取业务逻辑
4. 设计清晰的组件接口
问题:
组件渲染性能差，用户体验不佳
错误示例:
- 不必要的重新渲染
- 缺少React.memo优化
- 状态更新过于频繁
- 大量DOM操作
解决方案:
1. 使用React.memo优化
2. 合理使用useMemo和useCallback
3. 优化状态更新策略
4. 减少不必要的渲染
问题:
组件状态管理复杂，数据流不清晰
错误示例:
- 状态分散在各个组件
- 状态同步困难
- 状态更新逻辑混乱
- 缺少统一的状态管理
解决方案:
1. 使用合适的状态管理方案
2. 明确数据流向
3. 统一状态更新逻辑
4. 实现状态持久化
问题:
组件难以复用，代码重复严重
错误示例:
- 组件耦合度过高
- 缺少抽象层
- 配置不够灵活
- 硬编码过多
解决方案:
1. 降低组件耦合度
2. 提取公共逻辑
3. 增强组件配置性
4. 使用高阶组件和Hook
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
:
use_memo: []
use_callback: []
memo_wrap:
lazy_load:
virtualize:
:
():
.component_templates = {}
.optimization_strategies = {}
() -> :
spec. == ComponentType.FUNCTIONAL:
component_code = ._generate_functional_component(spec, state_management, performance_config)
spec. == ComponentType.CLASS:
component_code = ._generate_class_component(spec, state_management, performance_config)
:
ValueError()
component_code
() -> :
imports = ._generate_imports(spec, state_management, performance_config)
component_lines = []
spec.props:
props_interface = ._generate_props_interface(spec.props)
component_lines.append(props_interface)
component_lines.append() spec.props )
hook_imports = ._generate_hook_imports(state_management, performance_config)
component_lines.extend(hook_imports)
state_definitions = ._generate_state_definitions(spec.state, state_management)
component_lines.extend(state_definitions)
performance_config:
optimizations = ._generate_performance_optimizations(performance_config, spec)
component_lines.extend(optimizations)
event_handlers = ._generate_event_handlers(spec.methods)
component_lines.extend(event_handlers)
effects = ._generate_effects(spec.lifecycle, spec.state, spec.dependencies)
component_lines.extend(effects)
render_logic = ._generate_render_logic(spec)
component_lines.extend(render_logic)
component_lines.append()
performance_config performance_config.memo_wrap:
component_lines.append()
:
component_lines.append()
.join([imports] + component_lines)
() -> :
imports = ._generate_imports(spec, state_management, performance_config)
component_lines = []
spec.props:
props_interface = ._generate_props_interface(spec.props)
component_lines.append(props_interface)
component_lines.append()
spec.state:
constructor = ._generate_constructor(spec.state)
component_lines.append(constructor)
lifecycle_methods = ._generate_lifecycle_methods(spec.lifecycle, spec.state, spec.dependencies)
component_lines.extend(lifecycle_methods)
event_handlers = ._generate_class_methods(spec.methods)
component_lines.extend(event_handlers)
render_method = ._generate_class_render(spec)
component_lines.append(render_method)
component_lines.append()
component_lines.append()
.join([imports] + component_lines)
() -> :
imports = []
state_management == StateManagementType.CONTEXT:
imports.append()
state_management == StateManagementType.REDUX:
imports.extend([])
state_management == StateManagementType.ZUSTAND:
imports.append()
performance_config:
performance_config.use_memo performance_config.use_callback:
imports.append()
performance_config.lazy_load:
imports.append()
performance_config.virtualize:
imports.append()
.join(imports)
() -> :
interface_lines = []
prop props:
prop_name = prop[]
prop_type = prop[]
optional = prop.get(, )
default_value = prop.get(, )
optional_mark = optional
line =
default_value :
line +=
interface_lines.append(line)
interface_lines.append()
.join(interface_lines)
() -> []:
imports = []
imports.append()
imports.append()
state_management == StateManagementType.CONTEXT:
imports.append()
state_management == StateManagementType.REDUX:
imports.append()
imports.append()
state_management == StateManagementType.ZUSTAND:
imports.append()
imports
() -> []:
definitions = []
state_spec state_specs:
state_name = state_spec[]
state_type = state_spec[]
initial_value = state_spec.get(, )
initial_value :
definition =
:
definition =
definitions.append(definition)
definitions
() -> []:
optimizations = []
memo_item config.use_memo:
optimizations.append()
optimizations.append()
optimizations.append()
optimizations.append()
callback_item config.use_callback:
optimizations.append()
optimizations.append()
optimizations.append()
optimizations
() -> []:
handlers = []
method methods:
method_name = method[]
method_params = method.get(, [])
method_body = method.get(, )
params_str = .join(method_params)
handlers.append()
handlers.append()
handlers.append()
handlers
() -> []:
effects = []
lifecycle lifecycle:
effects.append()
effects.append()
effects.append()
effects.append()
state_spec state:
state_name = state_spec[]
effects.append()
effects.append()
effects.append()
effects.append()
effects
() -> []:
render_lines = []
render_lines.append()
render_lines.append()
prop spec.props:
prop_name = prop[]
render_lines.append()
state_spec spec.state:
state_name = state_spec[]
render_lines.append()
method spec.methods:
method_name = method[]
render_lines.append()
render_lines.append()
render_lines.append()
render_lines
() -> :
constructor_lines = []
constructor_lines.append()
constructor_lines.append()
state_spec state_specs:
state_name = state_spec[]
initial_value = state_spec.get(, )
constructor_lines.append()
constructor_lines.append()
constructor_lines.append()
.join(constructor_lines)
() -> []:
methods = []
lifecycle:
methods.append()
methods.append()
methods.append()
methods.append()
lifecycle:
methods.append()
methods.append()
methods.append()
methods.append()
lifecycle:
methods.append()
methods.append()
methods.append()
methods.append()
methods
() -> []:
class_methods = []
method methods:
method_name = method[]
method_params = method.get(, [])
method_body = method.get(, )
params_str = .join(method_params)
class_methods.append()
class_methods.append()
class_methods.append()
class_methods
() -> :
render_lines = []
render_lines.append()
render_lines.append()
render_lines.append()
prop spec.props:
prop_name = prop[]
render_lines.append()
state_spec spec.state:
state_name = state_spec[]
render_lines.append()
method spec.methods:
method_name = method[]
render_lines.append()
render_lines.append()
render_lines.append()
render_lines.append()
.join(render_lines)
:
():
.analysis_rules = {}
() -> [, ]:
analysis = {
: ._detect_component_type(component_code),
: ,
: [],
: [],
: {}
}
analysis[] = ._calculate_complexity(component_code)
analysis[] = ._detect_issues(component_code)
analysis[] = ._generate_recommendations(analysis[])
analysis[] = ._calculate_metrics(component_code)
analysis
() -> :
code code:
code code code:
code:
:
() -> :
complexity =
lines = code.split()
complexity += (lines) //
state_count = code.count() + code.count()
complexity += state_count *
method_count = code.count() + code.count() + code.count()
complexity += method_count
nesting_level = (line.count() line lines) //
complexity += nesting_level
complexity
() -> []:
issues = []
code code code:
issues.append()
code.count() > :
issues.append()
lines = (code.split())
lines > :
issues.append()
props_count = code.count()
props_count > :
issues.append()
code:
issues.append()
code code:
issues.append()
issues
() -> []:
recommendations = []
issue issues:
issue:
recommendations.append()
issue:
recommendations.append()
issue:
recommendations.append()
issue:
recommendations.append()
issue:
recommendations.append()
issue:
recommendations.append()
((recommendations))
() -> [, ]:
metrics = {}
lines = code.split()
metrics[] = (lines)
metrics[] = ([line line lines line.strip() line.strip().startswith()])
metrics[] = ([line line lines line.strip().startswith()])
metrics[] = {
: code.count(),
: code.count(),
: code.count(),
: code.count(),
: code.count(),
: code.count()
}
metrics[] = code.count()
metrics[] = code.count() + code.count()
metrics[] = code.count() + code.count()
metrics
():
()
designer = ReactComponentDesigner()
component_spec = ComponentSpec(
name=,
=ComponentType.FUNCTIONAL,
props=[
{: , : , : },
{: , : , : },
{: , : , : , : }
],
state=[
{: , : , : },
{: , : , : },
{: , : , : }
],
methods=[
{: , : [], : },
{: , : [], : }
],
lifecycle=[, ],
dependencies=[, ]
)
performance_config = PerformanceOptimization(
use_memo=[],
use_callback=[],
memo_wrap=,
lazy_load=,
virtualize=
)
component_code = designer.design_component(
component_spec,
StateManagementType.LOCAL_STATE,
performance_config
)
()
(component_code)
()
analyzer = ReactComponentAnalyzer()
analysis = analyzer.analyze_component(component_code)
()
()
()
analysis[]:
()
issue analysis[]:
()
analysis[]:
()
rec analysis[]:
()
()
metric, value analysis[].items():
(value, ):
()
k, v value.items():
()
:
()
__name__ == :
main()
from typing import Dict, Any, List, Optional
import re
class ReactComponentOptimizer:
def __init__(self):
self.optimization_rules = {}
def optimize_component(self, component_code: str) -> Dict[str, Any]:
"""优化React组件"""
optimization_result = {
'original_code': component_code,
'optimized_code': component_code,
'optimizations_applied': [],
'performance_improvements': []
}
optimized_code = component_code
# 应用各种优化
optimized_code, optimizations = self._apply_performance_optimizations(optimized_code)
optimization_result['optimizations_applied'].extend(optimizations)
optimized_code, state_optimizations = self._optimize_state_management(optimized_code)
optimization_result['optimizations_applied'].extend(state_optimizations)
optimized_code, render_optimizations = self._optimize_rendering(optimized_code)
optimization_result['optimizations_applied'].extend(render_optimizations)
optimized_code, code_optimizations = self._optimize_code_structure(optimized_code)
optimization_result['optimizations_applied'].extend(code_optimizations)
optimization_result['optimized_code'] = optimized_code
return optimization_result
() -> :
optimizations = []
optimized_code = code
code code:
component_match = re.search(, code)
component_match:
component_name = component_match.group() component_match.group()
optimized_code = optimized_code.replace(
,
)
optimizations.append()
inline_functions = re.findall(, code)
func inline_functions:
optimizations.append()
code code:
useMemo_code =
useState_pos = optimized_code.find()
useState_pos != -:
insert_pos = optimized_code.find(, useState_pos)
optimized_code = optimized_code[:insert_pos] + useMemo_code + optimized_code[insert_pos:]
optimizations.append()
optimized_code, optimizations
() -> :
optimizations = []
optimized_code = code
useState_count = code.count()
useState_count > code:
optimizations.append()
useState_count > :
optimizations.append()
code code:
optimizations.append()
optimized_code, optimizations
() -> :
optimizations = []
optimized_code = code
code code:
optimizations.append()
code code:
optimizations.append()
code:
optimizations.append()
optimized_code, optimizations
() -> :
optimizations = []
optimized_code = code
lines = code.split()
(lines) > :
optimizations.append()
code code:
optimizations.append()
code code:
optimizations.append()
optimized_code, optimizations
:
():
.test_templates = {}
() -> :
component_info = ._extract_component_info(component_code)
test_code = ._generate_test_file(component_info)
test_code
() -> [, ]:
info = {
: ,
: [],
: [],
: []
}
component_match = re.search(, code)
component_match:
info[] = component_match.group() component_match.group() component_match.group()
props_match = re.search(, code, re.DOTALL)
props_match:
props_content = props_match.group()
prop_lines = [line.strip() line props_content.split() line.strip()]
info[] = [line.split()[].replace(, ).strip() line prop_lines]
method_matches = re.findall(, code)
info[] = method_matches
state_matches = re.findall(, code)
info[] = state_matches
info
() -> :
component_name = component_info[]
test_lines = [
,
,
,
,
,
,
,
,
,
]
component_info[]:
test_lines.extend([
,
])
prop component_info[][:]:
test_lines.append()
test_lines.extend([
,
,
,
,
])
component_info[]:
method component_info[][:]:
test_lines.extend([
,
,
,
,
,
,
])
component_info[]:
test_lines.extend([
,
,
,
,
,
,
,
])
test_lines.extend([
,
,
,
,
])
.join(test_lines)
():
()
optimizer = ReactComponentOptimizer()
sample_component =
optimization_result = optimizer.optimize_component(sample_component)
()
()
opt optimization_result[]:
()
()
(optimization_result[])
()
test_generator = ReactComponentTestGenerator()
test_code = test_generator.generate_tests(sample_component)
()
(test_code)
__name__ == :
main()