react-production-patterns
Build production-ready React applications with performance optimization, code splitting, state management, and accessibility. Use for React components requiring optimization or complex state patterns. Use when this capability is needed.
来源信息
- 仓库
- tomevault-io/skills-registry
- 最近来源活动
- 2026年4月28日 22:53
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 1
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- react-production-patterns
- description
- Build production-ready React applications with performance optimization, code splitting, state management, and accessibility. Use for React components requiring optimization or complex state patterns. Use when this capability is needed.
- metadata
- {"author":"ak-eyther"}
# React Production Patterns
## Performance Optimization
```typescript
import { memo, useMemo, useCallback } from 'react'
// Memoized component
const ExpensiveComponent = memo(({ data }) => {
const processedData = useMemo(() => {
return data.map(item => expensiveOperation(item))
}, [data])
const handleClick = useCallback(() => {
// Handler logic
}, [])
return <div onClick={handleClick}>{processedData}</div>
})
```
## Code Splitting
```typescript
import { lazy, Suspense } from 'react'
const HeavyComponent = lazy(() => import('./HeavyComponent'))
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
)
}
```
## State Management (Zustand)
```typescript
import { create } from 'zustand'
interface Store {
count: number
increment: () => void
}
const useStore = create<Store>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}))
function Counter() {
const { count, increment } = useStore()
return <button onClick={increment}>{count}</button>
}
```
## Accessibility (ARIA)
```typescript
function AccessibleButton() {
const [isExpanded, setIsExpanded] = useState(false)
return (
<button
aria-expanded={isExpanded}
aria-label="Toggle menu"
onClick={() => setIsExpanded(!isExpanded)}
>
Menu
</button>
)
}
```
## Custom Hooks
```typescript
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value)
}, delay)
return () => clearTimeout(handler)
}, [value, delay])
return debouncedValue
}
```
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ak-eyther) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->
在 GitHub 查看