Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/microwind/ai-skills --skill reactThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing 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()