component-lifecycle-manager
Manages component lifecycle from creation to destruction. Handles initialization, mounting, updating, and cleanup patterns across React, Vue, and vanilla JS.
来源信息
- 仓库
- Fadil369/Solutions
- 最近来源活动
- 2026年4月9日 00:36
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 1
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- Component Lifecycle Manager
- version
- 1.0.0
- description
- Manages component lifecycle from creation to destruction. Handles initialization, mounting, updating, and cleanup patterns across React, Vue, and vanilla JS.
- author
- workspace
- activated
- false
# Component Lifecycle Manager
Manages component lifecycle from creation to destruction. Handles initialization, mounting, updating, and cleanup patterns across React, Vue, and vanilla JS.
## Decision Framework
### When to Apply
Use when: Complex components with side effects, subscriptions, timers, or external resources requiring cleanup
### When NOT to Apply
Don't use when: Simple stateless presentational components
## Anti-Patterns
### 1. Memory Leaks
```javascript
// BAD: No cleanup
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
// GOOD: Always clean up
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
```
### 2. Unnecessary Re-renders
```javascript
// BAD: New object every render
<Component style={{ color: 'red' }} onClick={() => doSomething()} />
// GOOD: Memoize
const style = useMemo(() => ({ color: 'red' }), []);
const handleClick = useCallback(() => doSomething(), []);
```
## Trigger Phrases
- "Component lifecycle"
- "Mount/unmount"
- "useEffect cleanup"
- "Memory leak"
- "Re-render optimization"
## Patterns
### Effect Lifecycle (React)
```javascript
useEffect(() => {
const controller = new AbortController();
fetchData(controller.signal);
return () => controller.abort(); // cleanup
}, [dependency]);
```
### Mount/Unmount Hooks
```javascript
function useMountUnmount(onMount, onUnmount) {
useEffect(() => {
onMount?.();
return () => onUnmount?.();
}, []);
}
```
## Integration
- Works with: state-machine-designer, performance-budget-enforcer
在 GitHub 查看